Angular中Bootstrap DatePicker选中日期后如何设置下一个选框最小日期加1天

修复方案 #

核心问题根因 #

你之前绑定的blur、change、ngModelChange事件不生效的核心原因是：blur仅在输入框失焦时触发，用户直接在日期选择面板点选日期后未失焦就不会触发；ngModelChange会受bsDatepicker内部更新时序影响，经常拿不到最新同步的日期值。

第一步：替换第一个输入框的触发事件 #

bsDatepicker提供专属的bsValueChange事件，只要用户选中日期就会触发，修改第一个输入框代码如下：

<input
  (bsValueChange)="setMinDate($event)"
  id="StartTime"
  type="text"
  name="StartTime"
  class="form-control"
  bsDatepicker
  datePickerLuxonModifier
  [(ngModel)]="userFirstInput.startTime"
  [maxDate]="userFirstInput.endTime"
  [minDate]="startdate"
  [bsConfig]="{ adaptivePosition: true }"
  required
/>

额外优化：[(date)]和[(ngModel)]功能重复，保留任意一个即可。

第二步：优化setMinDate方法兼容边界场景 #

补充空值判断，同时处理第二个输入框已选日期小于新最小日期的异常场景：

minPickDate: DateTime;
    
setMinDate(selectedDate: DateTime){
  // 选中日期有效时才设置第二个框的最小可选值
  if(selectedDate?.isValid){
    this.minPickDate = selectedDate.plus({days:1});
    // 如果第二个框已选日期小于新的最小值，直接清空避免冲突
    if(this.userSecondInput.endTime && this.userSecondInput.endTime < this.minPickDate){
      this.userSecondInput.endTime = null;
    }
  } else {
    // 第一个框清空时，重置第二个框的最小限制
    this.minPickDate = null;
  }
}

可选补充：适配OnPush变更检测策略 #

如果你的组件启用了ChangeDetectionStrategy.OnPush，需要手动触发变更检测才能让第二个输入框的minDate生效，修改代码如下：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

setMinDate(selectedDate: DateTime){
  if(selectedDate?.isValid){
    this.minPickDate = selectedDate.plus({days:1});
    if(this.userSecondInput.endTime && this.userSecondInput.endTime < this.minPickDate){
      this.userSecondInput.endTime = null;
    }
  } else {
    this.minPickDate = null;
  }
  // 手动触发变更检测
  this.cdr.detectChanges();
}

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