Date Picker Examples

Working @pglejzer/datepicker-ui configurations you can copy into your project.

Each example runs live next to its code. Field demos open the picker when you click the input: a docked popover on wide screens and a modal dialog on narrow ones. Switch a demo to Inline to see the calendar in the page.

Date range

#

Set calendar.mode to "range" to pick a start and an end date in one field. More in Date Range.

Range

Dates

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

Inline calendar

#

With ui.inline the calendar stays in the page. An inline picker has no footer, so behavior.commitOnChange writes each change to the input. This one selects several dates. More in Inline Calendar.

Inline, multiple

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/index.css";
3
4new DatepickerUI("#date", {
5  calendar: { mode: "multiple" },
6  ui: { inline: { enabled: true, container: "#calendar" } },
7  behavior: { commitOnChange: true },
8}).create();