Topic: Datepicker set disableUntil dynamically
Vitor Gotardo free asked 2 years 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:
.html
<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>
.ts
@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".
Arkadiusz Idzikowski staff answered 2 years ago
@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 2 years ago
@Arkadiusz Idzikowski Thank you for the answer, it worked great.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: 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