Topic: Localize Datepicker (and other components) globally
Joachim Schneider pro premium priority asked 3 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 3 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 3 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 3 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 3 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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