coachcare / npm-datepicker

Material Datepicker Fork with TimePicker by CoachCare
MIT License
32 stars 18 forks source link

How to set locale #33

Open breitembach opened 5 years ago

breitembach commented 5 years ago

how i can set another locale please?

jrauschenbusch commented 5 years ago

As it seems the locale is actually only interpreted by the original mat-datepicker but, but not by the timepicker extension.

matheo commented 5 years ago

@breitembach @jrauschenbusch you need to provide a Custom MatDatepickerIntl like:

import { MatDatepickerIntl } from '@coachcare/datepicker';

@NgModule({
  ...
  providers: [{ provide: MatDatepickerIntl, useClass: MyDatepickerIntl }]
})

and it works in the same way as the official Intl class, but following this interface: https://github.com/selvera/npm-datepicker/blob/master/datepicker/src/lib/datepicker-intl.ts

jrauschenbusch commented 5 years ago

@matheo If you only want to localize the labels and messages of the datepicker, then you're right. See https://material.angular.io/components/datepicker/overview#localizing-labels-and-messages for more details.

But if you want to localize the date format it should be sufficient to import the MatMomentDateModule and to set the locale as desired. One of the following approaches should then be sufficient to change to date format of an matInput element value:

Either on module level: { provide: MAT_DATE_LOCALE, useValue: 'de-DE' }

or dynamically on component level:

constructor(private dateAdapter: DateAdapter<Date>) {
    dateAdapter.setLocale('de-DE')
}

This is currently not the case. Instead the following function is called 2 times. One time with a _datepicker.type date and one time with a _datepicker.type datetime. I think the first call is not intended, but maybe a side effect caused by the original matDatepicker code of @angular/material.

MatDatepickerInput.prototype._formatValue = function (value) {
        var type = this._datepicker.type;
        this._elementRef.nativeElement.value = value
            ? this._dateAdapter.format(value, this._dateFormats.display[type])
            : '';
 };

Additionally the value of this._dateFormats.display[type] should be 'lll' for type datetime instead of 'll h:mma' to provide a proper localization.