Disable future dates using angular-bootstrap-datetimepicker

Question

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.

Corvo · Accepted Answer · 2018-11-21 08:56:39Z

2

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

answered Nov 21, 2018 at 8:56

Corvo

1671 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Disable future dates using angular-bootstrap-datetimepicker

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related