I've encountered a puzzling problem that has me stumped. I'm working with a mat date range picker in Angular Typescript and have run into an issue while trying to clear any selection made through a function.
The code snippet below successfully clears the selected date(s) as confirmed by console.log, but strangely, when I reopen the calendar after clearing, the previously selected dates still remain highlighted.
HTML
<mat-form-field class="datePickerForm">
<mat-date-range-input [formGroup]="range" [rangePicker]="picker" [disabled]="isDateRangeDisabled" #dateRangeInput>
<input matStartDate formControlName="start" placeholder="Select date range" (dateChange)="onDateFilter($event)" #startDate>
<input matEndDate formControlName="end" placeholder="" (dateChange)="onDateFilter($event)" #endDate>
</mat-date-range-input>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>
TS Clear function
@ViewChild('startDate') startDateRef: ElementRef;
@ViewChild('endDate') endDateRef: ElementRef;
range = new FormGroup({
start: new FormControl(),
end: new FormControl(),
});
...
this.startDate = undefined;
this.endDate = undefined;
this.startDateRef.nativeElement.value = '';
this.endDateRef.nativeElement.value = '';
this.range.value.start = null;
this.range.value.end = null;
...
For reference, onDateFilter() change event code
onDateFilter(event) {
this.startDate = moment(this.range.value.start).format('YYYY-MM-DDT00:00:00.000') + 'Z'
this.endDate = moment(this.range.value.end).format('YYYY-MM-DDT23:59:59.000') + 'Z'
this.validateDateRange(this.startDate, this.endDate);
}
Actual
https://i.sstatic.net/Mds3M.png
Expected