如何限制用戶在日期字段中手動輸入日期

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

還附上錯誤清晰的圖像 : 錯誤清晰的圖像

Answer 1

使用以下代碼行來限制使用 jquery 的手動日期字段輸入。

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

Answer 2

編輯1：

你的問題是有道理的。

處理日期的最佳方法是禁用手動輸入並僅允許使用Date Picker進行更改。

向輸入字段添加“只讀”屬性：

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

您是否還需要上述 Angular js 文件和 HTML 的代碼，或者這樣就可以了。

Answer 3

請忽略這一點，並沒有按預期解決問題。

這可能會有所幫助： https : //jsdaddy.github.io/ngx-mask-page/main#prefix

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

Answer 4

編輯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;
};