使用 angular-bootstrap-datetimepicker 禁用未来日期 [英] Disable future dates using angular-bootstrap-datetimepicker

问题描述

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

I'm building a website in which the user has the ability to see some charts. Those charts are date-specific so the user needs to select the date for the chart to show up.

一切正常，但用户可以选择未来的日期.这不应该发生，因为图表仅适用于现在和过去的日期.

Everything is working, but the user is allowed to select future dates. This shouldn't happen, because the charts are only for present and past dates.

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

For the project I'm using Angular5 and for the date picker angular-bootstrap-datetimepicker and I can't seem to find the way to disable those date.

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

The way I'm using the library to show the datepicker is something like this:

<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.:我已经看过旧的问题/答案，但它们不起作用，因为它们适用于所有版本的库.

P.S.: I've already looked at old questions/answers and they do not work because those are for all versions of the library.

推荐答案

我在图书馆的 文档.

有一个叫做selectFilter"的属性可以绑定到一个函数上，所以用法应该是这样的:

There's an attribute called "selectFilter" that can be bound to a function, so the use would be something like this:

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

然后 selectFilter 可以这样定义:

And then the selectFilter can be defined like this:

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

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

This function can be redefined following the specific requirements of each project :).

这篇关于使用 angular-bootstrap-datetimepicker 禁用未来日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！