Angular UI Bootstrap日期选择器与UI. mask结合使用

Angular UI Bootstrap date-picker Combined With UI.Mask

本文关键字：UI 结合 mask 选择器 Bootstrap 日期 Angular      更新时间：2023-09-26

我正在使用angular 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>

And my 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掩码功能，使键入日期更容易，而不必键入/。有可能把这些结合起来使用吗?

下面的代码片段适合我:

.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提供的掩码来装饰日期选择器指令。玩得开心!

UPDATE (May 13 2015)

一个柱塞来说明它的工作原理:http://plnkr.co/edit/fTFNu9Mp2kX5X1D6AJOx?p=preview

查看案例4:https://plnkr.co/edit/0Vr5YRVREIT5EMu1m55z?p=preview

model-view-value="true": 
<input name="date4" id="date4" type="text" class="form-control" uib-datepicker-popup="dd/MM/yyyy" 
    ui-mask="99/99/9999" placeholder="DD/MM/YYYY" ng-model="date4" ng-required="true" 
    model-view-value="true" is-open="popup4.opened" datepicker-options="dateOptions" 
    show-button-bar="false"/>
<span class="input-group-btn">
    <button type="button" class="btn btn-default" ng-click="open4()"><i class="fa fa-calendar fa-1"></i></button>
</span>

当我试着重现你的挑战时，我首先想到的是:

new Date('2016-15-20');

返回
Invalid Date

也许这是一个开始寻找解决方案的地方。那是几号?15个月还是20个月?不管怎样，这都行不通。为$scope.initDate提供有效的日期。也许你指的是"2016-12-20"?

你能不能就你的情况举一个小例子，我们可以用它来测试可能的解决方案?你所说的"混乱输入"到底是什么?同样，请提供一个问题和期望结果的例子。

相关文章：