Topic: Datepicker set disableUntil dynamically

Vitor Gotardo free asked 1 year ago

Hi, I'm trying to build a range filter for my data with two datepickers, one with "from date" and other with "to date". So I need to set the disableUntil property of my "to date" field so nobody could select a date backwards from the date of my "from date" field.

Thats the code I'm using:


<mdb-date-picker formControlName="from" [inline]="true" [options]="datePickerFromOptions" (dateChanged)="onDateFromChange($event)"></mdb-date-picker> 
<mdb-date-picker formControlName="to" [inline]="true" [options]="datePickerToOptions" #datePickerTo></mdb-date-picker>


@ViewChild('datePickerTo', { static: true }) datePickerTo: MDBDatePickerComponent;

constructor() {
    this.datePickerFromOptions = { dateFormat: 'dd/mm/yyyy' };
    this.datePickerToOptions = {
      dateFormat: 'dd/mm/yyyy',
      disableUntil: { year: this.dateRange.from.getFullYear(), month: this.dateRange.from.getMonth() + 1, day: this.dateRange.from.getDate() }

onDateFromChange(e: any) {
    /** trying to set the datePickerTo options here with
        * this.datePickerTo.setOptions() but this method doesn't have any parameters
        * and returns a void.

I tried setting the object this.datePickerToOptions from the onDateFromChange() method but it doesn't update the component "to date".

@Vitor Gotardo You just need to update the value of the datePickerToOptions and pass new reference of the datePickerToOptions to the component options input. Only then Angular will be able to detect change in the options parameter. Here is an example:

  this.datePickerToOptions.disableUntil = {year: 2021, month: 10, day: 1};
  this.datePickerToOptions = {...this.datePickerToOptions};

Vitor Gotardo free commented 1 year ago

@Arkadiusz Idzikowski Thank you for the answer, it worked great.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB4 12.0.0
  • Device: PC
  • Browser: Brave
  • OS: Windows
  • Provided sample code: No
  • Provided link: No