在bootstrap-ui datepicker中允许Moment.js日期

Question

我正在尝试使用Bootstrap UI的 DatePicker和Moment.js日期.

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

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

但是,我希望它尽可能透明,即无需手动预先转换.

我试图通过指令扩展添加包装格式化程序和解析器,但它不能正常工作,因为我期望:

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);
                    }
                });
            }
        }
    })
;

使用此扩展日期会在输入字段中正确显示,但是当弹出窗口打开时,会在其中选择不正确的日期.

另外,我不太确定我应该使用什么值指示priority财产,我应该叫什么方法上$formatters和$parsers,即push()VS unshift().

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

Answer 1

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

在这个plunker我改变了以下方法:

• ngModel.$renderon datepickerPopup ;
• parseDateon datepickerPopup ;
• 的minDate和的maxDate $watch上ES 日期选择器 ;
• this.render在datepicker ;
• this.refreshView在datepicker ;
• this.createDateObject在datepicker ;
• $scope.select在datepicker ;

与moment.utc(),我对结果非常满意.请让我知道这对你有没有用.

Answer 2

我还没有测试过这个，但你也许可以做到这一点。

创建一个返回正常日期的客户过滤器...如下所示

angular.module('phonecatFilters', []).filter('momentToDate', function() {
    return function(momentDate) {
        if (moment.isMoment(momentDate)) {
            return momentDate.toDate();
        }else { return momentDate }
    };
});

然后你在哪里声明你的指令 ng-model="yourmomentdate | momentToDate"