Language doesn't change when calling mdcDatetimePickerDefaultLocale.setDefaultLocale()

[SimonSimCity]

In my current code I use angular-translate and tried to update the language of ng-material-datetimepicker when I update the language there.

$rootScope.$on('$translateChangeSuccess', () => {
  const locale = $translate.use();
  mdcDatetimePickerDefaultLocale.setDefaultLocale(locale);

  $rootScope.locale = locale;
});

This code updates the default locale in your factory when my language (managed by angular-translate) is updated.

<md-input-container>
  <input type="text" class="md-input" readonly="readonly"
         mdc-datetime-picker="" date="true" time="true" ng-model="project.date" lang="{{ $root.locale }}" />
</md-input-container>

The code above works correct (take heed to that I manually injected the language here) whereby the following code still shows the old names for f.e. the week-day after updating the language:

<md-input-container>
  <input type="text" class="md-input" readonly="readonly"
         mdc-datetime-picker="" date="true" time="true" ng-model="project.date" />
</md-input-container>

It seems that the default value, I update in my $translateChangeSuccess event, is just used the first time mdc-datetime-picker is used and doesn't pick up the new value as I change it.

[hexadecy]

As a workaround we use this: https://github.com/lgalfaso/angular-dynamic-locale and $localeChangeSuccess.

[SimonSimCity]

@hexadecy and how do you hook this up with angular-material-datetimepicker? How do you tell this plugin that the locale has changed?

I've debugged it now and came down to the source. The main truth you need to face is, that

Both .service() and .factory() are both singletons as you’ll only get one instance [...] https://toddmotto.com/factory-versus-service#conclusion

If you now take a closer look at the code, you'll notice that mdcDefaultParams, the factory, used at every place to set the default values not defined in the element, returns an object. As of the article I quoted, this factory is built once for the runtime of a website and will stay the same where-ever you inject it.

So either I have to re-define your factory every time I change the language or this library returns a function instead of an object.

[SimonSimCity]

@hexadecy can you please confirm if https://github.com/beenote/angular-material-datetimepicker is the successor of this repository?

[SimonSimCity]

In the pull-request linked here, I've (based on the version 1.8.1 currently out on npm) refactored the service mdcDefaultParams to return a function. This allows to fetch the object every time again.

If you want, I can also rewrite it again in a way that mdcDefaultParams still returns an object, but I found this way much more flexible, because it allows users to manipulate every default parameter - not only the language.

[SimonSimCity]

I can confirm that the work-around by https://github.com/lgalfaso/angular-dynamic-locale works and I guess it will remove all the default properties you once set in my new PR ... If that's true, it should be added as a warning when you take my implementation.

[hexadecy]

Ok I'll check your PR. Yes I wanted to contribute to this repo, but our the version used by our organization is now more up to date.

[SimonSimCity]

Or ... actually ... it's still open here ... 😄

[hexadecy]

https://github.com/beenote/angular-material-datetimepicker/releases/tag/v1.8.2

[hexadecy]

mdcDatetimePickerDefaultLocale.setDefaultLocale() will be deprecated, please use:

mdcDefaultParams({ 
  lang: $scope.selectedLang, 
  cancelText: $translate.instant('CANCEL'), 
  todayText: $translate.instant('TODAY')
});