Mat-datepicker - How to show user saved value in input field - [(ngModel)]

Question

i don't know what am exactly missing. but not able to find the way to fix the issue.

I have Mat-datepicker - user selects date and saves it. dates are saved successfully. but when going back to see the changes. date is not there.

clearly, i want to show user saved date in mat-datepicker.

<div class="end-date">              
                <mat-form-field>
                    <input matInput [matDatepicker]="myDatepicker"  name="appEndDate" [value] = "appEndDate" [(ngModel)]="appEndDate">
                    <mat-datepicker-toggle matSuffix [for]="myDatepicker"></mat-datepicker-toggle>
                    <mat-datepicker #myDatepicker></mat-datepicker>
                  </mat-form-field>
          </div>

in ts.

 appEndDate: string;

    ngOninit(){
    this.appEndDate = this.someService['appoinementDetails'].endDate;

}

i dont understand from official doc, about get value method.

solution : sometimes(...rarely )clearing browser cache might help you. in my scenario. newly saved values not getting updated on model and it has showed some unwanted junk values which i used to save in some other form fields.

Answer 1

https://stackblitz.com/edit/angular-xjfnhk

you just need to bind it with or [(ngModel)], value or formcontrol.

In your case, the date isn't probably showing because it's in wrong format. you could put

appEndDate = new Date(this.someService['appoinementDetails'].endDate);

I got the code from here.