使用 angular-bootstrap-datetimepicker 禁用未来日期

Question

我正在构建一个网站，用户可以在其中查看一些图表。这些图表是特定于日期的，因此用户需要 select 图表显示的日期。

一切正常，但允许用户 select 未来的日期。这不应该发生，因为图表仅适用于现在和过去的日期。

对于我使用 Angular5 的项目和日期选择器 angular-bootstrap-datetimepicker，我似乎找不到禁用这些日期的方法。

我使用库显示日期选择器的方式是这样的：

<dl-date-time-picker      
   [startView]="'day'" 
   [minView]="'day'" [maxView]="'year'" 
   [ngModel]="item.entity" 
   (click)="$event.stopPropagation()" 
   (ngModelChange)="onDateChange(filter, item, $event, dd)"> 
</dl-date-time-picker>

有没有人知道怎么做？

P.S.: 我已经看过旧的 questions/answers 但它们不起作用，因为它们适用于所有版本的库。

Answer 1

我在图书馆 documentation 找到了答案。

有一个名为 "selectFilter" 的属性可以绑定到函数，因此使用方式如下：

<dl-date-time-picker
  [selectFilter]="selectFilter"
  [ngModel]="item.entity"           
  (click)="$event.stopPropagation()"
  (ngModelChange)="onDateChange(filter, item, $event, dd)">
</dl-date-time-picker>

然后 selectFilter 可以这样定义：

private selectFilter(dateButton: DateButton, viewName: string): boolean {
   return dateButton.value <= (new Date()).getTime();
}

这个功能可以根据每个项目的具体要求重新定义:).

使用 angular-bootstrap-datetimepicker 禁用未来日期

Disable future dates using angular-bootstrap-datetimepicker

angular

datepicker

angular5

bootstrap-datetimepicker