CODEWITHSUNDEEP
angularinputmat-datepicker
Ashok Ketha
Ashok Ketha

Reputation: 31

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

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

Upvotes: 2

Views: 7060

Answers (3)

Emmanuel Iyen
Emmanuel Iyen

Reputation: 439

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

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

Upvotes: 0

Gustavo López Frutos
Gustavo López Frutos

Reputation: 111

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

Upvotes: 1

Jonathan
Jonathan

Reputation: 9151

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' },
  ],

Upvotes: 1

Related Questions