在bootstrap-ui datepicker中允许Moment.js日期 [英] Allow Moment.js dates in bootstrap-ui datepicker

问题描述

我正在尝试使用 Bootstrap UI Moment.js 日期的.io / bootstrap /＃/ datepicker> DatePicker 。

I'm trying to use Bootstrap UI's DatePicker with Moment.js dates.

如果我将模型值从Moment.js日期转换为标准日期，然后再将其分配给范围：

It is possible if I convert my model value from Moment.js date to standard Date prior to assigning it to a scope:

$scope.myDate = moment('2014-11-07T21:20:15').toDate();

但是，我希望它尽可能透明，即无需手动事先转换。

However, I would like it to be as transparent as possible, i.e. without the need for manual prior conversion.

我试图通过指令扩展添加包装格式化程序和解析器，但它没有按照我的期望工作：

I've tried to add wrapping formatters and parsers via directive extension, but it's not working as I'm expecting:

angular
    .module('DatepickerWorkaround', [])
    .directive('datepickerPopup', function () {
        return {
            restrict: 'EAC',
            require: 'ngModel',
            priority: -10,
            link: function ($scope, element, attrs, ngModel) {

                // Remove the default formatter from the input directive to prevent conflict.
                // This is required for compatibility with AngularJS 1.3.x.
                ngModel.$formatters.shift();

                // Casting Moment.js date to standard date.
                ngModel.$formatters.unshift(function(momentDate) {
                    if (moment.isMoment(momentDate)) {
                        return momentDate.toDate();
                    }
                });

                // Casting standard date back to Moment.js date.
                ngModel.$parsers.push(function(date) {
                    if (date instanceof Date) {
                        return moment(date);
                    }
                });
            }
        }
    })
;

使用此扩展日期在输入字段中正确显示，但是当弹出窗口打开时，选择的日期不正确在它内部。

With this extension date is displayed correctly in the input field, but when popup opens the incorrect date is selected inside of it.

另外，我不太确定我应该将什么值用于指令 priority 属性和我应该在 $ formatters 和 $ parsers 上调用哪些方法，即 push（） vs unshift（）。

Also, I'm not quite sure what value should I use for directive priority property and what methods should I call on $formatters and $parsers, i.e. push() vs unshift().

有没有办法让Bootstrap UI的DatePicker与Moment一起使用.js透明日期？

Is there a way to make Bootstrap UI's DatePicker work with Moment.js dates transparently?

推荐答案

装饰原始 datepickerPopup 和 datepicker 指令可以实现这种转换。

Decorating the original datepickerPopup and datepicker directives it's possible to achieve this conversion.

在此 plunker 我改变了以下方法：

In this plunker I've changed the following methods:

• 上的 datepickerPopup ;


• parseDate 上的ngModel。$ render d atepickerPopup ;


• minDate 和 maxDate $ watch es on datepicker ;


• this.render on datepicker ;


• this.refreshView on datepicker ;


• this.createDateObject on datepicker ;


• $ scope.select on使用moment.utc（） datepicker ;

• ngModel.$render on datepickerPopup;
• parseDate on datepickerPopup;
• minDate and maxDate $watches on datepicker;
• this.render on datepicker;
• this.refreshView on datepicker;
• this.createDateObject on datepicker;
• $scope.select on datepicker;

我对结果非常满意。如果它适合您，请告诉我。

with moment.utc() and I'm pretty satisfied with the results. Let me know if it works for you.

这篇关于在bootstrap-ui datepicker中允许Moment.js日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！