如何限制用户在日期字段中手动输入日期

Question

我正在开发一个我想限制用户在html页面的type = date字段中手动输入日期的应用程序。 我想限制用户仅从日历显示中选择日期，即MM / DD / YYYY。

下面是html页面中的代码：

 <input type="date" name="bankTrans" ng-model="orderAstro.paymentDate" 
        class="form-control" id="bankTrans"
        ng-disabled="isDisabled" required />

还附上图像以使错误更清晰： Image for error clarity

Answer 1

编辑1：

您的问题很有意义。

处理日期的最佳方法是禁用手动输入并仅允许使用日期选择器进行更改。

在输入字段中添加“只读”属性：

<input type="date" readonly name="bankTrans" 
ng-model="orderAstro.paymentDate" class="form-control" 
id="bankTrans" ng-disabled="isDisabled" required />

您是否还需要上述Angular js文件和HTML的代码，还是这样就可以了。

Answer 2

请忽略这一点，不能按预期解决问题。

这可能会有所帮助：https://jsdaddy.github.io/ngx-mask-page/main#prefix

<input mask="00/00/0000">

Answer 3

编辑2：

禁用手动输入日期，仅允许通过日期选择器。

HTML代码：

<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" />

js文件：

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

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 4

使用以下代码行来限制使用jquery手动输入日期字段。

$("input[type='date']").keydown(function (event) { event.preventDefault(); });