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

问题描述

我正在尝试使用 Bootstrap UI DatePicker 带有 Moment.js 日期.

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

如果我将模型值从 Moment.js 日期转换为标准 Date，然后再将其分配给作用域，这是可能的:

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<上调用哪些方法/code>，即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:

• ngModel.$render on datepickerPopup;
• parseDate on datepickerPopup;
• minDate 和 maxDate $watch es on datepicker;
• this.render on datepicker;
• this.refreshView on datepicker;
• this.createDateObject on datepicker;
• $scope.select on 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;

使用 moment.utc() 并且我对结果非常满意.让我知道它是否适合您.

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

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