I am using angular material date picker in one of my ponent's of angular project. This ponent has two tabs. Using *ngIf I am showing only one at a time based on what user has clicked.In one tab user selects a date and if navigate away to other tab of same ponent and es back to previous one, I need to retain the selected date.

This is what I am doing in 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 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');
}

But when I navigate back, date value is not retained. Any suggestions how can I achieve this?

Here is sample stackblitz

I am using angular material date picker in one of my ponent's of angular project. This ponent has two tabs. Using *ngIf I am showing only one at a time based on what user has clicked.In one tab user selects a date and if navigate away to other tab of same ponent and es back to previous one, I need to retain the selected date.

This is what I am doing in 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 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');
}

But when I navigate back, date value is not retained. Any suggestions how can I achieve this?

Here is sample stackblitz

• javascript
• angular
• typescript
• angular-material

• 1 could you create a stackblitz example? – StepUp Commented Dec 3, 2019 at 8:42
• that's because when you navigate between tabs, ponent is rendered again. if you want to persist that value locally you should use localstorage for saving/retrieving value. – Mridul Commented Dec 3, 2019 at 9:16
• @StepUp I have added the stackblitz link. Here you can see that navigating between tabs the date is not retained. – Bijay Singh Commented Dec 3, 2019 at 10:22
• @Mridul am always in the same ponent, the tab item and it's content are in same ponent, so ponent is not rendering again, but I checked with your solution also, it didn't worked out – Bijay Singh Commented Dec 3, 2019 at 10:24
• This answer could help – User3250 Commented Dec 3, 2019 at 10:29

2 Answers 2

It does not work because you are not storing a selected value. So create a variable in typescript:

yourDate: any;

HTML:

<p> YourDate  {{ yourDate | date }} </p>

<mat-form-field>
    <input matInput [(ngModel)]="yourDate" 
        [matDatepicker]="picker" placeholder="Choose a date">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

It is possible to see the whole code at stackblitz

In your example you are not using any bindings. Try to use [(ngModel)], so that it will take and hold the selected value.

Do like this, it will work:

<mat-form-field>
          <input matInput [(ngModel)]="date" [matDatepicker]="picker" placeholder="Choose a date">
          <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-datepicker #picker></mat-datepicker>
</mat-form-field>