How to implement MD_DATE_FORMATS for datepicker?

Question

I'm trying to implement my own date format for shiny new datepicker from material2. According to 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 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 that date input is null. But what type it really is? Documentation says any.

If i try to put some dummy function there i get 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?

Still unclear about what a good working example is for this date picker to parse out a real date since it also takes strings — Eric Novins
– Eric Novins, Commented Jun 8, 2017 at 5:12

PeterS · Accepted Answer · 2017-06-12 15:03:07Z

9

Many thanks to @MariusR who pushed the solution. As stated you need to provide your own date adapter. From the plunkr, this is as simple as follows:

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);
  }
}

This can be any of your TS files and just needs to be provided in the module of your component with the date picker:

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

In your component you need to use it in the constructor:

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

The list of locales can be gathered here, the plunkr example uses Portuguese, mine is UK English.

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

MariusR, take a bow, why can't the official docs have this?

answered Jun 12, 2017 at 15:03

PeterS

2,96428 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Carsten Over a year ago

This absolutely saved me today. I changed the parse to facilitate 'nl' locale using '-' instead of '/'. I also overwrote the format() to display a specific value.

Aamir shah Over a year ago

@Carsten thanks for example, but didn't work for me. Maybe a complete example would be helpful.

PeterS Over a year ago

@Aamirshah The code I put in my answer is a complete example.

Frederik Struck-Schøning · Accepted Answer · 2017-06-07 17:50:33Z

1

In your code you should replace the

{provide: DateAdapter, useValue: NativeDateAdapter },

with

{provide: DateAdapter, useClass: NativeDateAdapter },

as the NativeDateAdapter is a class and not a constant.

This should resolve your problem with the .parse is not a function error.

I couldn't replicate the date input is null error though. Could be due to the same useClass problem but if you still encounter an error you could define the dateInput like

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

or a variation of

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

edited Jun 7, 2017 at 17:50

Frederik Struck-Schøning

13.3k9 gold badges63 silver badges70 bronze badges

answered May 29, 2017 at 11:54

MariusR

1,6242 gold badges12 silver badges20 bronze badges

4 Comments

charlie_pl Over a year ago

Your tips were very helpfull, but even after applying parse function as suggested: 'YYYY-MM-DD', result is still displayed as 'DD-MM-YYYY'. Do you have an idea why?

jbojcic Over a year ago

@charlie_pl I am getting MM/DD/YYYY by default. Is it possible that it depends on the computer settings?

charlie_pl Over a year ago

Probably, thats why i want to override it. When I put YYYY-MM-DD, I expect to get YYYY-MM-DD, and not MM-DD-YYYY, or MM-DD-YYYY.

MariusR Over a year ago

You might need to build your own custom adapter. How is e.g. mentioned here github.com/angular/material2/issues/4955#issuecomment-306008040 and an example can be found in the plunkr mentioned in the issue (plnkr.co/edit/FlgGpjqyDlypas0VZJzo?p=preview)

Ignacio Rossi · Accepted Answer · 2017-07-12 12:31:37Z

1

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

In your code you should replace the

{provide: DateAdapter, useValue: NativeDateAdapter }, with

{provide: DateAdapter, useClass: NativeDateAdapter },

I've made a project showing how to implement custom MdDateFormats and DateAdapter (implementing dates to fit 'es-UY' locale). It uses Moment.js to represent other date formats, and the implementation it's fully customizable to fit your needs. Custom locale files are here.

edited Jul 12, 2017 at 12:31

answered Jul 11, 2017 at 15:28

Ignacio Rossi

864 bronze badges

Collectives™ on Stack Overflow

How to implement MD_DATE_FORMATS for datepicker?

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related