Localization

Month and weekday names, the input format and the first day of the week follow a locale. This page documents @pglejzer/datepicker-ui, the companion of timepicker-ui.

German

#

calendar.locale is a BCP 47 tag. Without it the picker uses <html lang>, then navigator.language, then en-US. Month and weekday names come from Intl.

de-DE

Date

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/index.css";
3
4new DatepickerUI("#date", {
5  calendar: { locale: "de-DE" },
6}).create();

Japanese

#

ja-JP

Date

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/index.css";
3
4new DatepickerUI("#date", {
5  calendar: { locale: "ja-JP" },
6}).create();

Arabic, right to left

#

calendar.locale sets the language, digits and names. The calendar is mirrored when the input has dir="rtl", or inherits it from the page.

ar-EG

Date

1<input id="date" dir="rtl" />
2
3import DatepickerUI from "@pglejzer/datepicker-ui";
4import "@pglejzer/datepicker-ui/index.css";
5
6new DatepickerUI("#date", {
7  calendar: { locale: "ar-EG" },
8}).create();

First day of the week

#

calendar.weekStart is "auto" by default and follows the locale. Set a weekday name to override it.

Monday first

Date

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/index.css";
3
4new DatepickerUI("#date", {
5  calendar: { weekStart: "monday" },
6}).create();

Note

The buttons and messages are not translated by the locale. Set them in labels.