Как запретить пользователю вводить дату вручную в поле даты

Question

Я работаю над приложением, в котором я хочу ограничить пользователя, чтобы вручную вводить дату в поле type = date на html-странице. Я хочу ограничить выбор пользователем даты только из календаря, которая является MM / DD / YYYY.

Ниже приведен код на html-странице:

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

Также прикрепление изображения для наглядности ошибок: Изображение для ясности ошибки

Answer 1

Пожалуйста, игнорируйте это, это не решение проблемы, как предполагалось.

Это может помочь: https://jsdaddy.github.io/ngx-mask-page/main#prefix

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

Answer 2

Редактировать 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 3

Редактировать 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, а также этого достаточно?