如何使用Datepicker在Angular 5应用中验证日期？

Question

我有当前模板：

<input type="text" class="datepicker" name="my_date" placeholder="mm/dd/yyyy" #myDate="ngModel" [(ngModel)]="myDate" id="my_date">
<div class="error_message" *ngIf="myDate.errors?.invalidDate">
    Please enter valid date
</div>

我在onInit中有以下代码：

setTimeout(function () {
      $('.datepicker').datepicker({
        autoclose: true,
        dateFormat: 'MM/dd/yyyy'
      }).on('hide', function(e) {
          $('.datepicker').blur();
      });    
    }, 10);

在保存公司时，我具有验证逻辑：

if (validateDate(this.myDate) == false) {     
        myFormDirective.form.controls['my_date'].setErrors({'invalidDate': true});
    }   

问题是，当日期无效时，日期选择器将今天的日期改为onblur。 为了解释这个问题，我将给出两种情况：1. 03/10/1800的日期无效（小于1900），并且在触发onb​​lur时，错误会正确显示。 2. 01/32/2002不是有效日期，但在这种情况下，日期选择器应改为在2002 02/01/2002年中选择另一个有效日期，而不显示错误。

你知道汤姆如何确保验证在模糊时发生吗？

Answer 1

我强烈建议您删除jQuery datepicker，以使用更现代的Angular datepicker组件。 有许多潜在的选择。 问题在于这两个框架处理DOM操作的方式本质上是矛盾的。 jQuery在创建后修改DOM，而Angular创建DOM，使其始终处于正确状态，具体取决于您的模型。 尽管您仍然可以一起使用它们，但这可能不是最佳的设计方法。

在这种特定情况下，例如，如果您使用ngx Bootstrap的Date-picker组件 ，则可以轻松地附加on Change事件处理程序。

 import { Component } from '@angular/core'; @Component({ selector: 'demo-datepicker-value-change-event', templateUrl: './value-change-event.html' }) export class DemoDatepickerValueChangeEventComponent { data: Date; showWarning: boolean = false; onValueChange(value: Date): void { if(validateDatepicker(value)) showWarning = false; else showWarning = true; } validateDatepicker(value: Date){ let isValid = false; //Custom validation here... return isValid; } } 

 <div class="row"> <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group"> <input class="form-control" placeholder="Datepicker" bsDatepicker (bsValueChange)="onValueChange($event)"> </div> <div *ngIf="showWarning">Enter a valid date</div> </div>