Date Picker Localization and RTL

calendar.locale is a BCP 47 tag. Month and weekday names, the first day of the week, the auto date format and the digits all come from Intl for that locale. The locale is resolved in this order:

1. calendar.locale, when set to a valid BCP 47 tag
2. the lang attribute of <html>
3. navigator.language
4. en-US

An invalid tag emits invalid-option. Any Intl locale works.

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/index.css";
3
4new DatepickerUI("#date", {
5  calendar: { locale: "de-DE" },
6  labels: { title: "Datum wählen", confirm: "OK", cancel: "Abbrechen" },
7}).create();

Digits are shown in the numerals of the locale, and calendar.locale sets the language and the names. The layout is mirrored only when the input has a right-to-left direction, for example dir="rtl" on the input or on <html>. The container then gets the class dp-ui__container--rtl, and in the day grid the Left and Right arrow keys swap.

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();

calendar.weekStart is "auto", "sunday", "monday" or "saturday". "auto" follows the locale.

1new DatepickerUI("#date", {
2  calendar: { locale: "en-US", weekStart: "monday" },
3}).create();

Every visible and assistive text is a label, the screen-reader ones included. Month and weekday names are not labels. The table summarizes the main ones. The full table with every key and default is on the Options page.

multipleSelected is a PluralLabel: a string, or an object keyed by Intl.PluralRules categories. {count} is replaced by the number of dates.

1new DatepickerUI("#date", {
2  calendar: { mode: "multiple" },
3  labels: {
4    multipleSelected: { one: "{count} date", other: "{count} dates" },
5  },
6}).create();

• Localization example
• Typed input and format
• Options reference with every label
• Accessibility