How to change Mat-Datepicker date format to DD/MM/YYYY using user input

Question

My problem is the date picker does not support "DD/MM/YYYY" Format using input, only support by using calendar. and i need that the date picker should allow user enter date '25/11/2016' by using text input

Does this answer your question? [How to change Mat-Datepicker date format to DD/MM/YYYY in simplest way?](https://stackoverflow.com/questions/55721254/how-to-change-mat-datepicker-date-format-to-dd-mm-yyyy-in-simplest-way) — Jonathan, May 20 '22 at 07:02
It does work only if user selects from date picker but I want to parse user manual input also to DD/MM/YYYY. any suggestions will be appreciated. Thanks — Ashok Ketha, May 20 '22 at 09:44

score 1 · Answer 1 · answered May 20 '22 at 07:02

You can specify a date format in your app material module (if you added one)

const modules = [
  MatDatepickerModule,
];

const appDateFormat = {
  parse: {
    dateInput: 'D-M-YYYY',
  },
  display: {
    dateInput: 'D-M-YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

@NgModule({
  declarations: [],
  imports: modules,
  exports: modules,
  providers: [
    {
      provide: MAT_DATE_FORMATS,
      useValue: appDateFormat,
    },
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE],
    },
  ],
})
export class AppMaterialModule {}

You can also specify a locale in your app.module

  providers: [
    { provide: LOCALE_ID, useValue: 'nl-NL' },
  ],

score 0 · Answer 2 · answered Jan 20 '23 at 15:35

you should configure your app.module.ts like that:

    providers: [
        { provide: MAT_DATE_LOCALE, useValue: 'es-ES' },
        {
          provide: DateAdapter,
          useClass: MomentDateAdapter,
          deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
        },
        { provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },
      ],

Instead of 'es-ES', you can choose another.

It will show an alert about using moment, but this configuration is the recommended in Angular Material documentation

score 0 · Answer 3 · answered Jul 17 '23 at 12:09

0

The below will make your date in this format 18-07-2023

{ provide: MAT_DATE_LOCALE, useValue: 'nl-NL' },

answered Jul 17 '23 at 12:09

Emmanuel Iyen-Mediatrees

159
8

How to change Mat-Datepicker date format to DD/MM/YYYY using user input

3 Answers3