如何限制ngx-bootstrap Datepicker起始日期为当日或更早？

针对你的需求，ngx-bootstrap Datepicker提供了两种简单的实现方式，根据你使用的是独立日期选择器还是日期范围选择器（bsDaterangepicker），分别对应不同方案：

方案一：使用独立日期选择器（两个单独的Datepicker） #

如果你的日期范围是通过两个独立的Datepicker实现的，直接给起始日期选择器绑定maxDate属性即可：

1. 组件类中定义当日变量 #

在组件.ts文件中添加：

// 初始化当日日期，清零时分秒避免时间判断误差
today: Date = new Date(new Date().setHours(0, 0, 0, 0));

2. 模板中绑定maxDate属性 #

修改起始日期的Datepicker模板代码：

<!-- 起始日期选择器 - 限制只能选当日及之前 -->
<input type="text"
       class="form-control"
       bsDatepicker
       [(bsValue)]="startDate"
       [maxDate]="today"
       [bsConfig]="{ dateInputFormat: 'YYYY/MM/DD' }">

<!-- 结束日期选择器 - 限制不能早于起始日期 -->
<input type="text"
       class="form-control"
       bsDatepicker
       [(bsValue)]="endDate"
       [minDate]="startDate"
       [bsConfig]="{ dateInputFormat: 'YYYY/MM/DD' }">

方案二：使用日期范围选择器（bsDaterangepicker） #

如果用的是官方的范围选择器组件，通过dateDisabled函数限制起始日期不能选未来：

1. 组件类中定义判断函数 #

today: Date = new Date(new Date().setHours(0, 0, 0, 0));

// 判断日期是否需要禁用（仅禁用起始日期的未来日期）
disableFutureStartDates(date: Date): boolean {
  // 只禁用大于当日的日期
  return date > this.today;
}

2. 模板中绑定dateDisabled属性 #

<input type="text"
       class="form-control"
       bsDaterangepicker
       [(bsValue)]="dateRange"
       [dateDisabled]="disableFutureStartDates"
       [bsConfig]="{ 
         dateInputFormat: 'YYYY/MM/DD',
         ranges: { '今日': [this.today, this.today] }
       }">

关键注意点 #

• 必须清零当日日期的时分秒：直接用new Date()会包含当前时间，可能导致当日0点到当前时间的日期被误判为“小于当日”，所以用setHours(0,0,0,0)处理后再赋值。
• 若要保持结束日期不早于起始日期的逻辑，给结束日期选择器绑定[minDate]="startDate"即可，和你原有逻辑兼容。

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