угловой тип ввода дата-время-локальная проверка

Question

В моем угловом приложении для выбора даты и времени я использую тип ввода = "datetime-local".

 <input id="field_bookingTime" type="datetime-local" class="form-control" name="bookingTime" [(ngModel)]="bookingTime"
   required/>

Теперь мне нужно отключить даты, предшествующие текущей дате, и даты, которые находятся на 3 дня позже текущей даты. Например, для min, я добавил проверки, как показано ниже. Но проверки не работают, но в отображаемом календаре включаются предыдущие даты.

currentDate = new Date();

     <input [min]="currentDate" id="field_bookingTime" type="datetime-local" class="form-control" name="bookingTime" [(ngModel)]="bookingTime"
       required/>

Answer 1

Я бы рекомендовал написать пользовательский валидатор для управления формой. Мин и макс имеют плохую поддержку браузера , это относится и к дате, и к локальному времени.

    function dateValidator(c: FormControl) {
        // Not sure if c will come in as a date or if we have to convert is somehow
        const today = new Date();
        if(c.value > today) {
            return null;
        } else {
            return {dateValidator: {valid: false}};
        }
    }
    ...
    myForm = this.formBuilder.group({
        date: ['', dateValidator]
    })
    ...

Answer 2

<input> элементы типа datetime-local принимают значения min и max в виде строки только в формате yyyy-MM-ddThh:mm. Так как new Date() возвращает строку, которая имеет неправильный формат min и max не будет работать. Просто конвертируйте дату в правильный формат, как этот.

currentDate = new Date().toISOString().substring(0, 16);

Здесь мы сначала преобразовываем дату в желаемый формат, преобразовывая ее в упрощенный расширенный формат ISO (ISO 8601), который всегда имеет длину 24 или 27 символов, а затем удаляем символы после yyyy-MM-ddThh:mm

Answer 3

Попробуйте отформатировать дату с помощью тире:

Пример:

pipe = new DatePipe('en-US');

minDate = new Date();
minDateOut = pipe.transform(minDate, 'yyyy-MM-dd');

maxDate = new Date(minDate.getTime() + (1000 * 60 * 60 * 24 * 3));
maxDateOut = pipe.transform(maxDate, 'yyyy-MM-dd');


<input 
    [min]="minDateOut" 
    [max]="maxDateOut" 
    id="field_bookingTime" 
    type="datetime-local" 
    class="form-control" 
    name="bookingTime" 
    [(ngModel)]="bookingTime"
    required/>

Или просто используйте любой другой формат даты без пробелов ...