Setting angular material date picker value programmatically

Question

I am using angular material date picker in one of my component's of angular project. This component 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 component and comes 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

could you create a [stackblitz](https://www.stackblitz.com) example? — StepUp, Dec 03 '19 at 08:42
that's because when you navigate between tabs, component is rendered again. if you want to persist that value locally you should use localstorage for saving/retrieving value. — Mridul, Dec 03 '19 at 09:16
@StepUp I have added the stackblitz link. Here you can see that navigating between tabs the date is not retained. — Bijay Singh, Dec 03 '19 at 10:22
@Mridul am always in the same component, the tab item and it's content are in same component, so component is not rendering again, but I checked with your solution also, it didn't worked out — Bijay Singh, Dec 03 '19 at 10:24
[This](https://stackoverflow.com/a/52799795/4868839) answer could help — User3250, Dec 03 '19 at 10:29

StepUp · Accepted Answer · 2023-04-04T09:16:53.797

4

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

edited Apr 04 '23 at 09:16

answered Dec 03 '19 at 10:38

StepUp

36,391
15
88
148

I have updated my stackblitz code, with variable in ts file, but now for some reason am not even able to select the date in first place – Bijay Singh Dec 03 '19 at 10:51
I have modified my project code according to your stackblitz link, still for some weird reason it is not working :( am debugging it now. – Bijay Singh Dec 03 '19 at 11:01
@BijaySingh Try to copy and paste code. It should work. Have you tested stackblitz example? – StepUp Dec 03 '19 at 11:17
2

yes I tested with your code and it helped me. Also I was able to figure it out why it was not working for me, it was because am also using a filter on date picker and that filter is getting is set based on some options being selected before selecting date. – Bijay Singh Dec 04 '19 at 04:09
@BijaySingh I am glad that it helped to you! You're cool as you've found a reason why your code was not working! :) – StepUp Dec 04 '19 at 08:06

score 1 · Answer 2 · answered Dec 03 '19 at 10:26

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>

Setting angular material date picker value programmatically

2 Answers2