I am trying to use date format ‘YYYY-MM’DD’ in my date picker field. But the date picker only shows the default format date ‘MM-DD-YYYY’.

If I provide the provideMomentDateAdapter(MY_FORMATS) at the component level, it shows the date in correct format YYYY-MM-DD. But adding it globally shows it as MM-DD-YYYY.

Installed @angular/material-moment-adapter.
Here is my app.config.ts:

import { MatNativeDateModule, provideNativeDateAdapter } from '@angular/material/core';
import { provideMomentDateAdapter } from '@angular/material-moment-adapter';

// See the Moment.js docs for the meaning of these formats:
// https://momentjs.com/docs/#/displaying/format/
export const MY_FORMATS = {
  parse: {
    dateInput: 'YYYY-MM-DD',
  },
  display: {
    dateInput: 'YYYY-MM-DD',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

export const appConfig: ApplicationConfig = {
  providers: [
    // some other providers
    importProvidersFrom(MatNativeDateModule),
    provideMomentDateAdapter(MY_FORMATS),
  ]
};

Here is my component ts:

import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatMomentDateModule, provideMomentDateAdapter } from "@angular/material-moment-adapter";
// Depending on whether rollup is used, moment needs to be imported differently.
// Since Moment.js doesn't have a default export, we normally need to import using the `* as`
// syntax. However, rollup creates a synthetic default module and we thus need to import it using
// the `default as` syntax.
import * as _moment from 'moment';
// tslint:disable-next-line:no-duplicate-imports
import { default as _rollupMoment } from 'moment';

const moment = _rollupMoment || _moment;

interface SharedLogForm {
  logType: FormControl<logTypeIntfc>;
  logDate: FormControl<_moment.Moment>;
  logMode: FormControl<boolean>;
};

// export const MY_FORMATS = {
//   parse: {
//     dateInput: 'YYYY-MM-DD',
//   },
//   display: {
//     dateInput: 'YYYY-MM-DD',
//     monthYearLabel: 'MMM YYYY',
//     dateA11yLabel: 'LL',
//     monthYearA11yLabel: 'MMMM YYYY',
//   },
// };

@Component({
  selector: 'app-log-viewer',
  standalone: true,
  // providers: [
  //   // Moment can be provided globally to your app by adding `provideMomentDateAdapter`
  //   // to your app config. We provide it at the component level here, due to limitations
  //   // of our example generation script.
  //   provideMomentDateAdapter(MY_FORMATS),
  // ],
  imports: [ MatFormFieldModule, FormsModule, ReactiveFormsModule,
            MatIconModule, MatCheckboxModule, MatSelectModule,
            MatInputModule, MatButtonModule, MatTooltipModule,
            CommonModule, MatDatepickerModule, MatNativeDateModule,
            MatDatepickerModule, MatMomentDateModule ],
  templateUrl: './log-viewer.component.html',
  styleUrl: './log-viewer.component.scss'
})
export class LogViewerComponent {
 
  logForm: FormGroup<SharedLogForm>;
  

  constructor() {
    // Display today's date in the date field.
    this.logForm = new FormGroup<SharedLogForm>({
      logType: new FormControl(this.logTypeArray[0], {nonNullable: true}),
      logDate: new FormControl(moment(), {nonNullable: true}),
      logMode: new FormControl(false, {nonNullable: true}),
    });
  }

Here is my component html:

      <mat-form-field
        appearance="outline"
        color="primary"
        floatLabel="always">
        <mat-label>Choose Log date (UTC)</mat-label>
        <input matInput
          [matDatepicker]="picker"
          formControlName="logDate"
          matTooltip="Choose any date to see the logs.
          By default, today's logs will be displayed.">
        <mat-hint>YYYY-MM-DD</mat-hint>
        <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>