CODEWITHSUNDEEP
javascriptdatepickertailwind-cssflowbite
JanBoehmer
JanBoehmer

Reputation: 555

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.

Upvotes: 2

Views: 7596

Answers (2)

son_tran
son_tran

Reputation: 1

I found out that flowbite-datepicker is forked from vanillajs-datepicker, and after checking their docs I got the following code to work:

import Datepicker from "flowbite-datepicker/Datepicker";
import ja from "flowbite-datepicker/locales/ja";

const datepickerEl = document.getElementById("datepickerId");
Object.assign(Datepicker.locales, ja);
const datePicker = new Datepicker(datepickerEl, {
  language: 'ja',
});

Upvotes: 0

mojorisinify
mojorisinify

Reputation: 405

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

Check out this reference from the source repository.

Upvotes: 3

Related Questions