Question

我似乎无法找到一个简单的解决方案，但是我有类似这样的日期输入。

<input [(ngModel)]="toolDate" type="text" class="tool_input tool_input__date">

现在我正在使用https://nosir.github.io/cleave.js/来控制输入，因此除了日期外，您什么都不能写，所以在我的app.component.ts

中

export class ...
   toolDate = moment().format('DD/MM/YYYY');

ngOnInit() {
    const cleave = new Cleave('.tool_input__date', {
      date: true,
      datePattern: ['d', 'm', 'Y']
    });
}

所以我不需要日期格式验证，但是我需要最小日期和最大日期验证。.因此，用户不能输入少于01/01/2017的内容，也不能输入当前日期之后的日期

现在我知道默认情况下您可以使用日期并设置一个最小值和最大值，但是我不想使用默认的html日期选择器

任何帮助将不胜感激！

谢谢

Answer 1

使用以下自定义功能来验证日期。

HTML

<input type="date" class="form-control" formControlName="myDate">

组件：建立表单组时进行验证

this.myFormGroup = this.formBuilder.group({
    'myDate': new FormControl('myDateVal', [Validators.required, isValidDate]),
});

验证日期的实用方法。

export const isValidDate = (c: FormControl) => {
  const DATE_REGEXP = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;
  return DATE_REGEXP.test(c.value) || c.value === '' ? null : {
    validateEmail: {
      valid: false
    }
  };
}

Angular 5日期验证（接受的最小值和最大值）

1 个答案: