Material: allow changing datepickers days/month names during runtime

[mxab]

Hi,

from what I get from the docs of the $mdDateLocaleProvider the day/month names can only be set during the config phase

in our application the user can change the language during runtime. Would it be possible to make a more dynamic approach for the day/month names?

[jelbourn]

We're not currently supporting any on-the-fly internationalization changes for components throughout the library.

While not officially supported, though, you could directly change the values on the $mdDateLocale service and then re-render the template somehow.

[mxab]

Just in case someone comes across this problem this is how you can get it to work, assuming you are using momentjs / angular-translate

var localeDate = moment.localeData();

$mdDateLocale.months = localeDate._months;
$mdDateLocale.shortMonths = localeDate._monthsShort;
$mdDateLocale.days = localeDate._weekdays;
$mdDateLocale.shortDays = localeDate._weekdaysMin;

$mdDateLocale.msgCalendar = $translate.instant('MSG_CALENDAR');
$mdDateLocale.msgOpenCalendar = $translate.instant('MSG_OPEN_CALENDAR');

[webpartisan]

I write decorator for md-datepicker, it rerender md-datepickers if you change $mdDateLocale.formatDate during runtime. Don't forget update $mdDateLocale.parseDate too. Comments are welcome.

.config(function ($provide) {
      $provide.decorator('mdDatepickerDirective', function ($delegate, $rootScope) {
        (function (configureNgModel) {
          $delegate[0].controller.prototype.configureNgModel = function (ngModelCtrl) {
            $rootScope.$on('$translateChangeStart', function () {
              ngModelCtrl.$render();
            });
            configureNgModel.call(this, ngModelCtrl);
          };
        }($delegate[0].controller.prototype.configureNgModel));
        return $delegate;
      });
    })

[christiaanwesterbeek]

@mxab and others that may want to try his solution. With Angular 1.5.9 and moment 2.17.1 if $mdDateLocale.shortMonths are changed to localeDate._monthsShort during runtime. A set of errors occur when you expand the md-datepicker.

TypeError: Cannot read property '0' of undefined
at Object.defaultMonthHeaderFormatter [as monthHeaderFormatter] (angular-material.js:27323)
at CalendarMonthBodyCtrl.buildCalendarForMonth (angular-material.js:26610)
at CalendarMonthBodyCtrl.generateContent (angular-material.js:26482)

Root cause is that moment.localeData()._monthsShort is undefined now. Instead assign the short months like so:

$mdDateLocale.shortMonths = moment.monthsShort();

I've worked out a full example on SO: http://stackoverflow.com/questions/32566416/change-format-of-md-datepicker-in-angular-material/43409002#43409002