javascript 在 bootstrap-ui 日期选择器中允许 Moment.js 日期
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27626721/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Allow Moment.js dates in bootstrap-ui datepicker
提问by Slava Fomin II
I'm trying to use Bootstrap UI'sDatePickerwith Moment.jsdates.
我正在尝试将Bootstrap UI 的DatePicker与Moment.js日期一起使用。
It is possible if I convert my model value from Moment.js date to standard Dateprior to assigning it to a scope:
如果我在将模型值Date分配给范围之前将它从 Moment.js 日期转换为标准值，则是可能的：
$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.
使用此扩展日期在输入字段中正确显示，但当弹出窗口打开时，在其中选择了不正确的日期。
Also, I'm not quite sure what value should I use for directive priorityproperty and what methods should I call on $formattersand $parsers, i.e. push()vs unshift().
另外，我不太确定应该为指令priority属性使用什么值以及应该调用什么方法$formattersand $parsers，即push()vs unshift()。
Is there a way to make Bootstrap UI's DatePicker work with Moment.js dates transparently?
有没有办法让 Bootstrap UI 的 DatePicker 与 Moment.js 日期透明地工作？
回答by Igor de Lorenzi
Decorating the original datepickerPopupand datepickerdirectives it's possible to achieve this conversion.
装饰原件datepickerPopup和datepicker指令可以实现这种转换。
In this plunkerI've changed the following methods:
在这个plunker 中，我更改了以下方法：
ngModel.$renderon datepickerPopup;parseDateon datepickerPopup;- minDateand maxDate
$watches on datepicker; this.renderon datepicker;this.refreshViewon datepicker;this.createDateObjecton datepicker;$scope.selecton datepicker;
ngModel.$render在datepickerPopup 上；parseDate在datepickerPopup 上；- 日期选择器上的minDate和maxDate
$watches ； this.render在日期选择器上；this.refreshView在日期选择器上；this.createDateObject在日期选择器上；$scope.select在日期选择器上；
with moment.utc() and I'm pretty satisfied with the results. Let me know if it works for you.
使用 moment.utc() ，我对结果非常满意。请让我知道这对你有没有用。
回答by startswithaj
I haven't tested this but you might be able to do this.
我还没有测试过这个，但你可能可以做到这一点。
Create a customer filter that that returns the normal date...something like the below
创建一个返回正常日期的客户过滤器......类似于下面的内容
angular.module('phonecatFilters', []).filter('momentToDate', function() {
return function(momentDate) {
if (moment.isMoment(momentDate)) {
return momentDate.toDate();
}else { return momentDate }
};
});
Then where you declare you directive
ng-model="yourmomentdate | momentToDate"
然后你在哪里声明你的指令
ng-model="yourmomentdate | momentToDate"
