I have implemented the Angular Material date picker in one of the components of my Angular project. This specific component consists of two tabs, and I am using *ngIf to display only one tab at a time based on user interaction. When a user selects a date in one tab and then navigates away to another tab within the same component, I want to ensure that the selected date is retained when they return.
This is how I am handling it in the HTML side:
<mat-form-field class="dropdownWidth">
<input #dateInput matInput [matDatepickerFilter]="myFilter" [matDatepicker]="picker"
placeholder="Choose a date"
[value]="datePickerDate"
[(ngModel)]="datePickerDate"
(dateChange)="addDateEvent($event)"
[disabled]="selectedOperator.length === 0 && userDateRange.length === 0">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
And in the TS file:
addDateEvent(event) {
this.datePickerEvent = event;
this.datePickerDate = new Date(`${event.value['_i'].month + 1}-${event.value['_i'].date}-${event.value['_i'].year}`);
this.formatDate = moment(event.value).format('YYYY-MM-DD');
}
However, I am facing an issue where the date value is not being retained when navigating back. Any insights on how I can achieve this?
Feel free to check out the sample on StackBlitz.