如何使用 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});
    }   

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

知道 tom 如何确保验证发生在 blur 上吗？

Answer 1

我强烈建议您放弃 jQuery datepicker 以获得更现代的 Angular datepicker 组件。有许多潜在的选择。问题是这两个框架处理 DOM 操作的方式本质上是不一致的。 jQuery 在创建 DOM 后会对其进行修改，而 Angular 会根据您的模型创建 DOM，使其始终处于正确的状态。虽然您仍然可以将它们一起使用，但这可能不是最好的设计方法。

在这种特定情况下，例如，如果您使用ngx Bootstrap's Date-picker component，您可以轻松附加一个 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>