Recently, I was experimenting with the date picker feature of Angular Material and stumbled upon this particular example
After implementing this example with my own logic, everything seemed to be working perfectly fine except for one issue. The dates were being returned from the MatDateRangeSelectionStrategy class, which appears to be an injection token (I'm not entirely sure how it functions). This class only provides date ranges based on UI-triggered events such as selectionFinished and createPreview. Unfortunately, when a date range is selected, I couldn't find a way to reset it programmatically or through the DOM.
I've attempted the following so far:
<mat-form-field appearance="fill">
<mat-label>Select a start date</mat-label>
<mat-date-range-input [rangePicker]="picker">
<input [value]="newStart" disabled="true" (dateChange)="startNewChanged($event.value)" matStartDate placeholder="Start date">
<input [value]="newEnd" disabled="true" matEndDate placeholder="End date">
</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>
In this code snippet, where newStart and newEnd represent the dates, it seems to override the selected range. Is there any other approach that could potentially solve this issue?