我正在使用角度UI引导程序弹出日期选择器来构建指令,该指令可以轻松地使我在需要的地方添加日期选择器。
当我将其与uiMask指令结合使用时,当我选择一个日期时,输入中的值会变得混乱。
这是我的html :
<p class="input-group"> <input type="text" class="form-control" ui-mask="99/99/9999" ng-model="ngModel" ng-model="order.date" datepicker-popup="MM/dd/yyyy" is-open="opened" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" /> <span class="input-group-btn"> <button type="button" class="btn btn-default" ng-click="open($event)"> <i class="glyphicon glyphicon-calendar"></i> </button> </span> </p>
而我的JS :
/** * DATE PICKER */ $scope.today = function () { $scope.dt = new Date(); }; $scope.today(); $scope.clear = function () { $scope.dt = null; }; // Disable weekend selection $scope.disabled = function (date, mode) { return (mode === 'day' && (date.getDay() === 0 || date.getDay() === 6)); }; $scope.toggleMin = function () { $scope.minDate = $scope.minDate ? null : new Date(); }; $scope.toggleMin(); $scope.open = function ($event) { $event.preventDefault(); $event.stopPropagation(); $scope.opened = true; }; $scope.dateOptions = { formatYear: 'yy', startingDay: 1 }; $scope.initDate = new Date('2016-15-20'); $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate']; $scope.format = $scope.formats[0];
我希望能够使用ui-mask功能,而不必键入/s,从而使键入日期更容易。是否可以将它们一起使用?
/
以下代码段对我有用:
.config(function ($provide) { $provide.decorator('datepickerPopupDirective', function ($delegate) { var directive = $delegate[0]; var link = directive.link; directive.compile = function () { return function (scope, element, attrs) { link.apply(this, arguments); element.mask("99/99/9999"); }; }; return $delegate; }); });
它只是用 jquery.maskedinput.js 提供的掩码 修饰datepicker 指令。玩得开心!
更新(2015年5月13日)
一个说明它工作原理的工具:http ://plnkr.co/edit/fTFNu9Mp2kX5X1D6AJOx?p=preview