Skip to content
Advertisement

How to change the locale in Flowbite datepicker?

Unfortunately the Flowbite Datepicker Documentation has no instruction on how to use another locale, but the support is there.

This is how I implemented the datepicker (working):

import Datepicker from "flowbite-datepicker/Datepicker";

document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll("[datepicker]").forEach(function (datepickerEl) {
    new Datepicker(datepickerEl);
  });
});

and this is how I try to get the locale to work:

import Datepicker from "flowbite-datepicker/Datepicker";
import { locales } from "../../node_modules/flowbite-datepicker/js/i18n/base-locales.js";
import de from "../../node_modules/flowbite-datepicker/js/i18n/locales/de.js";

locales.de = de;

const datepickerOptions = {
  language: "de",
  weekStart: 1,
};

document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll("[datepicker]").forEach(function (datepickerEl) {
    const d = new Datepicker(datepickerEl);
    d.setOptions(datepickerOptions);
  });
});

But my modular Javascript understanding is too poor to get this right. This is the file to reference the original code. Should be straight forward for someone with more experience.

Advertisement

Answer

Instead of locales.de = de, try Datepicker.locales.de = de.

Check out this reference from the source repository.

User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement