Localize Datepicker (and other components) globally


Topic: Localize Datepicker (and other components) globally

Joachim Schneider pro premium priority asked 4 years ago

Trying to localize the month names as shown below leads to an error:

  <div class="form-outline datepicker"
    data-mdb-months-full='["Januar", "Februar", "März"]' ....

Actual behavior

DATEPICKER: Option "monthsFull" provided type "string" but expected type "array".

Is there a way to update the month names like shown? Moreover, is it possible to localize MDB components globally? E.g. by including a "localized-de.js" after including the "mdb.min.js"?

Thanks a lot!


UNNdev pro premium priority answered 4 years ago

I've done this by introducing my own class called datepicker-localized which I initialize myself with JS. Have a look here:

https://mdbootstrap.com/snippets/standard/kayem79/3156488


Joachim Schneider pro premium priority answered 4 years ago

@UNNdev Thanks a lot for your answer. Your solution is working for a single page application. But if we load partial pages via AJAX, the translation script has to be triggered manually. Moreover, there is no need to separate "translated" and "nonTranslated" datepickers. A global translation approach including all datepickers would be cleaner.

In our case, on solution could be using the data-attributes. E.g.

  <div class="form-outline datepicker"
    data-mdb-months-full='[Translated-Months]' ....

Here the "[Translated-Months] could be set during the page rendering and no Re-Init has to be done. But this is currently not working, because a "String" is required for a data attribute.

The perfect way would be an override of the constants inside the Datepicker class. Here are defined:

  monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  weekdaysFull: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
  weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
  weekdaysNarrow: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],

Is there a way to override these constants after the MDB-JS is included?`

Thanks a lot!


Dawid Wajszczuk staff answered 4 years ago

Hi,

The solution provided by @UNNdev is great and works fine. I hope that this will solve your problem.

Keep coding,
Dawid


Dawid Wajszczuk staff answered 4 years ago

This constants can only by changed via JS when initializing Datepicker, like in UNNdev's snippet. If you really want to change this constants globally, you can try changing them in Datepciker class in src directory and then make your custom version of MDB-UI-KIT following this instructions https://mdbootstrap.com/docs/standard/getting-started/webpack-starter/#section-custom-version-of-mdb-ui-kit . But we are not responsible for any breakage of this custom build. I hope this will solve your problem.

Keep coding,
Dawid


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.8.0
  • Device: Web
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No