Datepicker does not show month (as names) anymore (since 0.20)

[jwiesmann]

Bug, feature request, or proposal:

The names of the month in the datepicker are not "user-friendly" anymore. Instead of displaying 'June', you will only see 'M06'.

What is the expected behavior?

The month should be displayed with their names (Jan, Feb...)

What is the current behavior?

The month are displayed like (M01,M02...)

What are the steps to reproduce?

You can actually see that on your demo page (http://code.promactinfo.com/md2/#/datepicker)

What is the use-case or motivation for changing an existing behavior?

Current behaviour seems not to be very user friendly

Is there anything else we should know?

Great work guys :)

[dharmeshpipariya-zz]

It is and INTL issue of the browser.

[dharmeshpipariya-zz]

@jwiesmann it is an INTL issue and it will depend on support of browser, you can use 'DateLocale' service and customise it, refer API Docs

[abiranjan]

@jwiesmann
Find the implementation below

1. Import the DateLocale service from md2
2. Re assign the values to the type you want to be changed. (ex.months here)

import { DateLocale } from 'md2';
export class myComponent {

private Month = {
'long': [
'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
'October', 'November', 'December'
],
'short': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
'narrow': ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D']
} ;

constructor(private myDate : DateLocale) {
this.myDate.months = this.Month;
}

}

[jwiesmann]

Hi @abiranjan,

sorry for my late reply, but that works perfectly! Thank you for pointing me in the right direction!

[abiranjan]

@jwiesmann Glad to hear :)

[sanidz]

Seems like DateAdapter.setLocale doesnt do the trick but @abiranjans implementation + protototype override for DateLocale does :)

This is implementation for German:

1. Call overrideDateLocaleMonthsDE method in app.component constructor

2. When using DatePicker component use DateLocale model instead of usual Date object.

   Months = {
   'long': ['Januar', 'Februar', 'März', 'April', 'Mai', 'June', 'Juli', 'August', 'September','Oktober', 'November', 'Dezember'],
   'short': ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
   'narrow': ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D']
   };
   Days = {
   'long': ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag',],
   'short': ['Son', 'Mon', 'Die', 'Mit', 'Don', 'Frei', 'Sam'],
   'narrow': ['S', 'M', 'D', 'M', 'D', 'F', 'S']
   };

   private overrideDateLocaleMonthsDE(language: string) {
   if(language === 'de' || language === 'de-DE') {
   DateLocale.prototype.months = this.Months;
   DateLocale.prototype.daysOfWeek = this.Days;
   // this shows monday as first column of the datepicker
   DateLocale.prototype.getFirstDayOfWeek = function () { return 1};
   }
   }