角UI引导日期选择器吐纳UI.Mask [英] Angular UI Bootstrap date-picker Combined With UI.Mask
问题描述
我使用的角度 UI引导弹出日期选择器建立一个指令,将很容易让我补充的日期选取器所需要的。
I am using the angular UI bootstrap popup date-picker to build a directive that will easily allow me to add the date-picker where need.
当我结合这与 uiMask指令,当我拿起一个输入的数值得到加密日期。
When I combine this with the uiMask Directive, the values in the input get scrambled when I pick a date.
这是我的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];
我希望能够通过不必键入 /
s到使用UI面罩的功能,使输入更方便日期。是否有可能能一起使用这些?
I would like to be able to use the ui-mask functionality to make typing dates easier by not having to type the /
s. Is it possible to be able to use these together?
推荐答案
下面的片段为我工作:
The following snippet worked for me:
.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 提供了一个面具。玩得开心!
It simply decorates the datepicker directive with a mask provided by jquery.maskedinput.js. Have fun!
更新(2015年5月13日)
一个plunker来说明它的工作: http://plnkr.co/edit/ fTFNu9Mp2kX5X1D6AJOx?p = preVIEW
A plunker to illustrate it working: http://plnkr.co/edit/fTFNu9Mp2kX5X1D6AJOx?p=preview
这篇关于角UI引导日期选择器吐纳UI.Mask的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!