Angular UI Bootstrap 日期选择器结合 UI.Mask [英] Angular UI Bootstrap date-picker Combined With UI.Mask

问题描述

我正在使用 angular UI bootstrap popup date-picker 来构建一个指令，可以轻松地允许我在需要的地方添加日期选择器.

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];

我希望能够使用 ui-mask 功能，通过不必键入 / 来更轻松地键入日期.可以一起使用吗?

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?

推荐答案

以下代码段对我有用:

.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 指令.玩得开心！

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

这篇关于Angular UI Bootstrap 日期选择器结合 UI.Mask的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！