Angular 2中如何设置日期选择器的起止日期范围？

首先得说，你之前尝试用jQuery的方式去操作datepicker是行不通的——Angular组件（比如你用的angular2-date-picker）本身封装了自己的状态和配置，直接用jQuery去修改DOM元素的属性会绕开Angular的变更检测，自然不会生效。咱们换个符合Angular思路的方式来实现。

核心思路 #

angular2-date-picker组件的settings配置里其实支持minDate和maxDate属性，我们可以通过动态更新另一个日期选择器的settings中的min/max值来实现范围限制，完全不需要jQuery。

修改后的代码实现 #

1. 更新filter.component.ts

我们需要给两个日期选择器分别配置独立的settings，这样可以单独控制它们的最小/最大可选日期：

import { Component, OnInit } from '@angular/core';

export class FilterComponent implements OnInit {
  public date1: Date = new Date();
  public date2: Date = new Date();
  
  // 给"From"选择器配置settings，限制它的最大日期为date2
  public settingsFrom = {
    bigBanner: true,
    timePicker: true,
    format: 'dd-MM-yyyy hh:mm a',
    maxDate: this.date2
  };
  
  // 给"To"选择器配置settings，限制它的最小日期为date1
  public settingsTo = {
    bigBanner: true,
    timePicker: true,
    format: 'dd-MM-yyyy hh:mm a',
    minDate: this.date1
  };

  constructor() { }

  ngOnInit() { }

  // 当选择From日期时，更新To选择器的minDate
  onDate1(selectedDate: Date){
    this.date1 = selectedDate;
    this.settingsTo.minDate = selectedDate;
  }

  // 当选择To日期时，更新From选择器的maxDate
  onDate2(selectedDate: Date){
    this.date2 = selectedDate;
    this.settingsFrom.maxDate = selectedDate;
  }
}

2. 更新filter.component.html

把两个日期选择器分别绑定对应的settings：

<div class="row">
 <div class="col-md-2">
 <label>From</label>
 <angular2-date-picker 
   (onDateSelect)="onDate1($event)" 
   [(ngModel)]="date1" 
   [settings]="settingsFrom">
 </angular2-date-picker>
 </div>
 <div class="col-md-2">
 <label>To</label>
 <angular2-date-picker 
   (onDateSelect)="onDate2($event)" 
   [(ngModel)]="date2" 
   [settings]="settingsTo">
 </angular2-date-picker>
 </div>
</div>

关键说明 #

• 为什么不用jQuery？Angular的组件是数据驱动的，所有状态变更应该通过修改组件的属性来触发，而不是直接操作DOM。angular2-date-picker会自动监听settings的变化，更新可选日期范围。
• 时间部分也会被正确限制：因为我们传递的是完整的Date对象（包含时分秒），所以"To"选择器不能选择"From"之前的任何时间点，反之亦然。
• 如果你的angular2-date-picker版本较旧，可能需要确认settings是否支持minDate/maxDate——不过这个属性是这类组件的标准配置，大概率是支持的。

这样修改后，你就能实现想要的日期范围限制功能了，完全符合Angular的开发模式。

内容的提问来源于stack exchange，提问作者Kirataka