Topic: Datepicker Translations generating console error
CarrierLog
pro premium priority asked 6 days ago
I'm trying to get translations to work for a datepicker. I've tried both
data-mdb-months-full=['janvier','février','mars','avril','mai','juin','juillet','aout','septembre','octobre','novembre','décembre',]
and
data-mdb-months-full="['janvier','février','mars','avril','mai','juin','juillet','aout','septembre','octobre','novembre','décembre',]"
On both cases, I get a console error: mdb.umd.min.js:20 Uncaught Error: DATEPICKER: Option "monthsFull" provided type "string" but expected type "array".
What is the proper syntax to initiate a datepicker with translations for the month and weekday names?
Expected behavior Datepicker renders with the translated strings
Actual behavior console error: mdb.umd.min.js:20 Uncaught Error: DATEPICKER: Option "monthsFull" provided type "string" but expected type "array".
Resources (screenshots, code snippets etc.)
<div class="form-outline datefield" data-mdb-datepicker-init data-mdb-input-init data-mdb-inline="true" data-mdb-format="mm/dd/yyyy"
data-mdb-max="2025-12-04" data-mdb-disable-past="true"
data-mdb-cancel-btn-label="Cancel selection"
data-mdb-cancel-btn-text="Annulation"
data-mdb-clear-btn-label="Clear selection"
data-mdb-clear-btn-text="effacer"
data-mdb-months-full=['janvier','février','mars','avril','mai','juin','juillet','aout','septembre','octobre','novembre','décembre',]
data-mdb-months-short=['Jan','Feb','Mar','Apr','mai','Jun','Jul','Aug','Sep','Oct','Nov','Dec',]
data-mdb-next-month-label="Next month"
data-mdb-next-multi-year-label="Next 24 years"
data-mdb-next-year-label="Next year"
data-mdb-ok-btn-label="Confirm selection"
data-mdb-ok-btn-text="Ok"
data-mdb-prev-month-label="Previous month"
data-mdb-prev-multi-year-label="Previous 24 years"
data-mdb-prev-year-label="Previous year"
data-mdb-switch-to-day-view-label="Switch to day list"
data-mdb-switch-to-multi-year-view-label="Switch to year list"
data-mdb-title="Select date"
data-mdb-toggle-button-label="Open Datepicker"
data-mdb-weekdays-full=['dimanche','lundi','mardi','mercredi','jeudi','vendredi','samedi',]
data-mdb-weekdays-narrow=['S','M','T','W','T','F','S',]
data-mdb-weekdays-short=['Sun','Mon','Tue','Wed','Thu','Fri','Sat',]
>
<input id="shipdate" name="shipdate" class="form-control" type="text" tabindex="3" value="10/20/2025" />
<label class="form-label" for="shipdate">Pickup date</label>
<div class="invalid-feedback">Invalid date</div>
</div>
Kamila Pieńkowska
staff answered 6 days ago
There’s a reason why the example in the documentation passes options to the datepicker using JavaScript — arrays can only be passed this way. It’s not possible to pass an array as an argument via a data attribute.
CarrierLog
pro premium priority answered 5 days ago
Thank you for the response. Maybe a documentation update would be a good idea to make this clear. Or, enhance the code to eval() the argument when it should be an array.
For now I'll convert my code to use js to setup the translations.
Kamila Pieńkowska staff commented 5 days ago
We prefer not to use eval() for parsing values passed in HTML because it poses significant security and maintainability risks. Using eval() means executing arbitrary code, which could potentially be exploited if untrusted input is ever passed to it. In addition, it makes the codebase harder to debug and maintain.
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 9.0.0
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No