How to implement MD_DATE_FORMATS for datepicker?

Question

I am trying to implement my own date format for the shiny new datepicker from material2. According to the documentation, I have to provide my version of MD_DATE_FORMATS:

providers: [ {provide: DateAdapter, useValue: NativeDateAdapter }, {provide: MD_DATE_FORMATS, useValue: MY_DATE_FORMATS }, ], 

When I use the default implementation:

 export const MD_NATIVE_DATE_FORMATS: MdDateFormats = { parse: { dateInput: null, }, display: { dateInput: {year: 'numeric', month: 'numeric', day: 'numeric'}, monthYearLabel: {year: 'numeric', month: 'short'}, dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'}, monthYearA11yLabel: {year: 'numeric', month: 'long'}, } }; 

I get an error message that enters a date. But what type is it? Documentation says any.

If I try to install some dummy function, I get an error: _dateAdapter.parse is not a function.

 function dateInput() { return 'ddd'; } const MY_DATE_FORMATS: MdDateFormats = Object.assign({}, MD_NATIVE_DATE_FORMATS, {parse: dateInput }); 

How to make it work?

Answer 1

Many thanks to @MariusR who pushed the solution. As indicated, you need to provide your own date adapter. From plunkr, it is so simple:

 export class OurDateAdapter extends NativeDateAdapter { parse(value: any): Date | null { if ((typeof value === 'string') && (value.indexOf('/') > -1)) { const str = value.split('/'); return new Date(Number(str[2]), Number(str[1])-1, Number(str[0]), 12); } const timestamp = typeof value === 'number' ? value : Date.parse(value); return isNaN(timestamp) ? null : new Date(timestamp); } } 

It can be any of your TS files and you just need to provide it in the module of your component using the date picker:

  providers: [ {provide: DateAdapter, useClass: OurDateAdapter} ] 

In your component, you should use it in the constructor:

  constructor(private dateAdapter: DateAdapter<Date>) { this.dateAdapter.setLocale('en-GB'); } 

Here you can compile a list of locales, an example of plunkr is Portuguese, my English is English.

http://www.i18nguy.com/unicode/language-identifiers.html

MariusR, bow, why can't official documents have this?

Answer 2

In your code you have to replace

 {provide: DateAdapter, useValue: NativeDateAdapter }, 

from

 {provide: DateAdapter, useClass: NativeDateAdapter }, 

since the NativeDateAdapter is a class, not a constant.

This should solve your problem with .parse, this is not a function error.

I could not replicate the date input, but this is a mistake. Perhaps due to the same useClass problem, but if you still encounter an error, you can define dateInput as

 parse: { dateInput: {year: 'numeric', month: 'numeric', day: 'numeric'}, }, 

or variations

 parse: { dateInput: 'YYYY-MM-DD', }, 

Answer 3

The Angular implementation uses the default Javascript implementation, which means that you probably would like to create your own implementation of MdDateFormats and DateAdapter to get a custom representation of the date. As @MariusR said:

In your code you have to replace

{provide: DateAdapter, useValue: NativeDateAdapter } , with

{provide: DateAdapter, useClass: NativeDateAdapter } ,

I created a project that shows how to implement custom MdDateFormats and DateAdapter (embed dates to match "es-UY" 'locale). It uses Moment.js to present other date formats and implementations, which it fully customizes to suit your needs. Custom locale files here .