Question

我是棱角分明的新手，我陷入了无法限制用户手动输入有效日期的地步。它将日期设置为未定义的空，字符以及用户输入的无效日期。我提到的日期格式是MM-dd-yyyy。即使我输入85/34/2102，它也会将其视为日期并采用一些垃圾值而不是验证并抛出错误。

我的html中的角度日期选择器代码

 <input type="text" class="form-control" datepicker-popup="{{clCtrl.format}}" 
   ng-model="clCtrl.QualityExpirationDate" is-open="clCtrl.openedQualityDate" 
   min-date="clCtrl.minDate" datepicker-options="clCtrl.dateOptions"  
   ng-required="true" close-on-date-selection="true" show-button-bar="false" />

和角度控制器端的代码

self.dateOptions = {
        formatYear: 'yy',
        startingDay: 1
    };

    self.formats = ['MM-dd-yyyy', 'MM/dd/yyyy', 'MM.dd.yyyy', 'shortDate'];
    self.format = self.formats[0]; 

self.openQualityDate = function ($event) {
        $event.preventDefault();
        $event.stopPropagation();
        self.openedQualityDate = true;
    };


 self.toggleMin = function () {
        self.minDate = self.minDate ? null : new Date();
    };
    self.toggleMin();

    self.clear = function () {

        self.QualityExpirationDate = null;
    };

Answer 1

添加＆＃39; readonly＆＃39;属性到输入字段：

<input type="text" readonly class="form-control" datepicker-popup="{{clCtrl.format}}" ng-model="clCtrl.QualityExpirationDate" is-open="clCtrl.openedQualityDate" min-date="clCtrl.minDate" datepicker-options="clCtrl.dateOptions" ng-required="true" close-on-date-selection="true" show-button-bar="false" />

如果您想允许用户输入但限制为有效日期，可以将其添加到控制器：

$scope.$watch('dt', function(val) {
  $scope.isValidDate =  isNaN(new Date(val).getTime());
});

然后使用＆＃39; isValidDate＆＃39;范围属性，用于显示/隐藏消息和/或禁用提交，或者您想要做的任何事情。

当然最好将此验证抽象为指令，以便可以在所有日期字段中轻松重复使用。

我如何限制用户只在角度引导程序日期选择器中输入日期字段

1 个答案: