docs(datetimepicker): internationalization

[nzbin]

Setting the locale code

It also needs MAT_DATE_LOCALE injection token to customize the locale code. Please check the Material docs:

https://material.angular.io/components/datepicker/overview#setting-the-locale-code

Choosing a date implementation and date format settings

MtxNativeDatetimeModule

import { MtxNativeDatetimeModule } from '@ng-matero/extensions/core';

MtxMomentDatetimeModule

npm i moment
npm i @angular/material-moment-adapter
npm i @ng-matero/extensions-moment-adapter

import { MtxMomentDatetimeModule } from '@ng-matero/extensions-moment-adapter';

MtxLuxonDatetimeModule

npm i luxon
npm i @angular/material-luxon-adapter
npm i @ng-matero/extensions-luxon-adapter

import { MtxLuxonDatetimeModule } from '@ng-matero/extensions-luxon-adapter';

MtxDateFnsDatetimeModule

npm i date-fns
npm i @angular/material-date-fns-adapter
npm i @ng-matero/extensions-date-fns-adapter

import { MtxDateFnsDatetimeModule } from '@ng-matero/extensions-date-fns-adapter';

Customizing the parse and display formats

The MTX_DATETIME_FORMATS object is a collection of formats that the datetimepicker uses when parsing and displaying dates. These formats are passed through to the DatetimeAdapter so you will want to make sure that the format objects you're using are compatible with the DatetimeAdapter used in your app.

If you want use one of the DatetimeAdapter that ships with Angular Material, but use your own MTX_DATETIME_FORMATS, you can import the NativeDatetimeModule or MomentDatetimeModule. These modules are identical to the "Mtx"-prefixed versions (MtxNativeDatetimeModule and MtxMomentDatetimeModule) except they do not include the default formats.

For moment adapter

import { MTX_DATETIME_FORMATS } from '@ng-matero/extensions/core';
import { MtxDatetimepickerModule } from '@ng-matero/extensions/datetimepicker';
import { MtxMomentDatetimeModule } from '@ng-matero/extensions-moment-adapter';

@NgModule({
  imports: [
    MtxDatetimepickerModule,
    MtxMomentDatetimeModule, // <= It also works with MomentDatetimeModule
  ],
  providers: [
    {
      provide: MTX_DATETIME_FORMATS,
      useValue: {
        parse: {
          dateInput: 'YYYY-MM-DD',
          monthInput: 'MMMM',
          yearInput: 'YYYY',
          timeInput: 'HH:mm',
          datetimeInput: 'YYYY-MM-DD HH:mm',
        },
        display: {
          dateInput: 'YYYY-MM-DD',
          monthInput: 'MMMM',
          yearInput: 'YYYY',
          timeInput: 'HH:mm',
          datetimeInput: 'YYYY-MM-DD HH:mm',
          monthYearLabel: 'YYYY MMMM',
          dateA11yLabel: 'LL',
          monthYearA11yLabel: 'MMMM YYYY',
          popupHeaderDateLabel: 'MMM DD, ddd',
        },
      },
    },
  ],
})

For luxon adapter

Check the PR #138

For date-fns adapter

Check the PR #140

Localizing labels and messages

The various text strings used by the datetimepicker are provided through MtxDatetimepickerIntl. Localization of these messages can be done by providing a subclass with translated values in your application root module.

@NgModule({
  imports: [MatDatepickerModule, MatNativeDateModule],
  providers: [
    {provide: MtxDatetimepickerIntl, useClass: MyIntl},
  ],
})
export class MyApp {}

[Wapg2002]

How do I do if I want to translate the name of the months and days?

[Dimitri-CLAIN]

I'm currently struggling with internationalization.
I have followed the setup instructions for MtxDateFnsDatetimeModule

The popup changes correctly (Date format, date language) when I switch the language, but the manual input always defaults to English.

Could you please help me?

My setup

    "@angular/material-date-fns-adapter": "^14.2.0",
    "@ng-matero/extensions": "^17.3.5",
    "@ng-matero/extensions-date-fns-adapter": "^17.1.2",
    "date-fns": "^2.29.3",

in main.ts I provide :

      MtxNativeDatetimeModule,
      MtxDatetimepickerModule,
      { provide: MAT_DATE_LOCALE, useValue: enUS },

And in my component I provide:

{ provide: MTX_DATETIME_FORMATS, useValue: CUSTOM_DATE_FORMATS }