Options API Reference

A value of the wrong type or an unknown choice falls back to the default. The picker also emits an error event with code invalid-option and the option path in option, for example ui.theme.

1import DatepickerUI from "@pglejzer/datepicker-ui";
2
3const picker = new DatepickerUI("#date", {
4  ui: { theme: "neon" },
5});
6
7picker.on("error", ({ code, option, message }) => {
8  if (code === "invalid-option") {
9    console.warn(option, message);
10  }
11});
12
13picker.create();

Which days exist, what the user selects and how the weeks are laid out:

isDateDisabled and decorateDate may throw. The error is rethrown asynchronously and the day counts as enabled and undecorated. renderDate and validate follow the same rule: the day gets no content, and the value counts as valid.

Presentation and display behaviour:

The input view exists for single pickers in a modal and for every range picker. Multiple pickers have no input view. The theme names are basic, m3-green, crane, crane-straight, m2, glassmorphic, pastel, ai, cyberpunk and blueprint.

Every visible and assistive text is a label. Month and weekday names come from Intl, not from labels.

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

Interaction rules:

Each callback receives the payload of its event. The payload types and when each event fires are on the Events page.

DateDecoration is what calendar.decorateDate returns. RangePreset and RangePresetValue describe calendar.range.presets.

1new DatepickerUI("#date", {
2  calendar: {
3    decorateDate: (date) =>
4      date.getDate() === 1
5        ? { className: "first-of-month", badge: true, label: "First of the month" }
6        : undefined,
7  },
8}).create();

1const day = 24 * 60 * 60 * 1000;
2
3new DatepickerUI("#range", {
4  calendar: {
5    mode: "range",
6    range: {
7      presets: [
8        {
9          label: "Last 7 days",
10          value: () => ({
11            start: new Date(Date.now() - 6 * day),
12            end: new Date(),
13          }),
14        },
15        { label: "Q4 2026", value: { start: "2026-10-01", end: "2026-12-31" } },
16      ],
17    },
18  },
19}).create();

A preset click completes the range as if the user had picked both ends. It emits range:end, not select:day, and follows behavior.closeOnSelect and behavior.commitOnChange. A preset is disabled when its value is invalid or the length limits refuse the range.