Datepicker Translations generating console error


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.


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 9.0.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No