Angular DatePicker refuses to display in DD/MM/YYYY

Question

My app set up

import {
  MAT_MOMENT_DATE_ADAPTER_OPTIONS,
  MAT_MOMENT_DATE_FORMATS,
  MomentDateAdapter
} from '@angular/material-moment-adapter';
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from "@angular/material/core";
import moment from 'moment/min/moment-with-locales';
moment.locale('en-gb')

export const MY_FORMATS = {
  parse: {
    dateInput: ['DD/MM/YYYY'],
  },
  display: {
    dateInput: (date: any) => moment(date).format('DD/MM/YYYY'),
    monthYearLabel: 'MMMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY'
  },
};

enableProdMode();
bootstrapApplication(
  AppComponent,
  {
    providers: [
    provideRouter(APP_ROUTES),
    provideHttpClient(withFetch()),
    provideAnimationsAsync(),
    provideAnimations(),
    { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'outline' }},
    { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
    { provide: MAT_DATE_LOCALE, useValue: 'en-GB' },
    { provide: DateAdapter, useClass: MomentDateAdapter },
    { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } },
],
  }
).catch((err) =>
  console.error(err),
);

My component HTML

<mat-form-field class="form-date">
  <mat-label>Contract Start Date</mat-label>
  <input matInput [matDatepicker]="picker" formControlName="contractStart">
  <mat-hint>DD/MM/YYYY</mat-hint>
  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker [startAt]="contractStart.value"></mat-datepicker>
</mat-form-field>

contractStart.value is an iso-date of the form 'YYYY-MM-DD'

The datepicker still displays the date in the form DD/MM/YYYY?

Any ideas why this may be happening? I've followed all the instructions here: https://material.angular.io/components/datepicker/overview

ST

UPDATE

Some bug I cannot understand but this doesn't work

bootstrapApplication(
  AppComponent,
  {
    providers: [
    provideRouter(APP_ROUTES),
    provideHttpClient(withFetch()),
    provideAnimationsAsync(),
    provideAnimations(),
    { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'outline' }},
    { provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },
    { provide: MAT_DATE_LOCALE, useValue: 'en-GB' },
    { provide: DateAdapter, useClass: MomentDateAdapter },
    { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } },
],
  }

However this does, (putting providers in component)

@Component({
  selector: 'app-personal-information-edit',
  standalone: true,
  imports: [CommonModule, MatFormFieldModule, MatDatepickerInput, MatDatepickerToggle, MatDatepicker,
    MatMomentDateModule, MatIcon],
  templateUrl: './personal-information-edit.component.html',
  providers: [
    DatePipe,
    { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
    { provide: MAT_DATE_LOCALE, useValue: 'en-GB' },
    { provide: DateAdapter, useClass: MomentDateAdapter },
    { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } },
  ],
  styleUrl: './personal-information-edit.component.scss'
})

Answer 1

export const MY_FORMATS = {
  parse: {
    dateInput: ['DD/MM/YYYY'],
  },
  display: {
    dateInput: (date: any) => moment(date).format('DD/MM/YYYY'),
    monthYearLabel: 'MMMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY'
  },
};

The dateInput from parse indicates how the date will be parsed from input.

The dateInput from display indicates how the date will get displayed on the input.

If you want YYYY-MM-DD format, try this config

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

Stackblitz Demo