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

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
– 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
– Bijay Singh, Commented Dec 3, 2019 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
– Bijay Singh, Commented Dec 3, 2019 at 10:24

StepUp · Accepted Answer · 2023-04-04 09:16:53Z

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 4, 2023 at 9:16

answered Dec 3, 2019 at 10:38

StepUp

38.5k16 gold badges95 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Bijay Singh Over a year ago

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 Over a year ago

I have modified my project code according to your stackblitz link, still for some weird reason it is not working :( am debugging it now.

StepUp Over a year ago

@BijaySingh Try to copy and paste code. It should work. Have you tested stackblitz example?

Bijay Singh Over a year ago

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.

StepUp Over a year ago

@BijaySingh I am glad that it helped to you! You're cool as you've found a reason why your code was not working! :)

Tushar · Accepted Answer · 2019-12-03 10:26:50Z

1

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>

answered Dec 3, 2019 at 10:26

Tushar

2,1081 gold badge16 silver badges34 bronze badges

Collectives™ on Stack Overflow

Setting angular material date picker value programmatically

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related