Myujth

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.

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>

Is there anybody that may know how to do it?

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

I found the solution reading at the library's documentation.

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>

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 :).