date does not display on the date picker input field

Question

How do we display only the selected month and year to the input field , right after I select the value does not display. The selected month and year should display. What seems to be the issue ? Thanks

example value : this.selectedMonthYear June 2025

#code

<mat-form-field>
                <input [(ngModel)]="selectedMonthYear" matInput [matDatepicker]="picker" placeholder="Select month" readonly>
                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-datepicker #picker startView="multi-year" (monthSelected)="closeStartDatePicker($event, picker)"></mat-datepicker>
              </mat-form-field>

 selectedMonthYear: string = "";

 closeStartDatePicker(normalizedMonth: Date, dp?: any) {
      // Format the selected month and year
      // this.selectedMonthYear = normalizedMonth
      this.selectedMonthYear = this.formatMonthYear(normalizedMonth);
      console.log(" this.selectedMonthYear" ,  this.selectedMonthYear)
      // console.log('this.selectedMonthYear' ,)
      // Close the datepicker
      dp.close();
  }

  private formatMonthYear(date: Date): string {
    const month = date.toLocaleString('en-us', { month: 'long' });
    const year = date.getFullYear();
    return `${month} ${year}`;

Answer 1

Most of the time input field of type date accepts a certain format of date, usually Year-month-day (Y-m-d) : eg. 2023-10-28.

So when passing date string to the field, try changing format until you find the one that is recognized. As far as I know, the Y-m-d is common.