Question

我试图在Bootstrap UI's日期使用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调用哪些方法，即{{1} } vs push()。

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

Answer 1

修改原始的datepickerPopup和datepicker指令，可以实现此转换。

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

ngModel.$render在 datepickerPopup ;
parseDate在 datepickerPopup ;

datepicker

minDate 和 maxDate $watch
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"

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

2 个答案: