角度输入类型日期时间本地验证

Question

在我用于日期时间选择的 Angular 应用程序中，我使用的是 input type="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

我建议为表单控件编写custom validator。最小值和最大值的 browser support 不好，但这也适用于本地日期时间。

    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 的元素仅接受yyyy-MM-ddThh:mm 格式的最小值和最大值作为字符串。由于new Date() 返回的字符串格式不正确，因此 min 和 max 将不起作用。只需像这样将日期转换为正确的格式。

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

在这里，我们首先将日期转换为所需的格式，方法是将其转换为 简化 扩展 ISO 格式 (ISO 8601)，该格式始终为 24 或 27 个字符长，然后删除 @ 之后的字符987654326@

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

或者只是使用任何其他不带空格的日期格式...