Date Picker Layouts and Fields

calendar.months shows months side by side in a docked or inline picker. The picker shows as many months as fit the width, up to the number you set. The width is read when the picker opens and on setOptions(), not on resize. A modal picker always shows one month, and a range picker in a modal or full screen keeps its vertical month list.

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

calendar.pageBy sets how far the arrows and swipes move: "view" (the default) pages by the number of months shown, "month" by one. Outside days are not shown with several months. The navigate event reports the first month shown.

calendar.range.presets adds shortcuts for ranges. A value is a { start, end } object of dates or ISO strings, or a function returning one. The function runs each time the picker refreshes, so relative presets stay current.

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

Presets show as a column beside the calendar in a docked or inline picker when there is room, and as a row of chips under the header otherwise. A modal and a full-screen picker always use the chip row. They are hidden in the input view. labels.presets names the group.

A 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 limits refuse the range.

ui.endInput takes the selector or element of a second <input> on your page. The page owns both inputs, their labels, styling and names. It is read on create() and only used in range mode. A value that is not an <input> emits invalid-option and the picker keeps one field.

1<input id="start" name="checkin" />
2<input id="end" name="checkout" />

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

Each field shows its own date. Clicking or pressing Alt+Down Arrow in the End field opens the picker on the end, and the class dp-ui__input--active marks the field that the next pick fills. Picking the start makes End active. The picker does not style your inputs, so add your own rule for that class:

1.dp-ui__input--active {
2  outline: 2px solid #6750a4;
3}

Typing commits only a full pair, or two empty fields. A half-filled pair commits nothing and shows no error. A reversed pair emits invalid-date with labels.invalidRange on the End field. ui.mask works in both fields.

ui.fixedWeeks always renders six rows, so the picker keeps one height from month to month. ui.outsideDays: true shows neighbouring days and keeps them selectable. { selectable: false } shows them dimmed and inert: they get dp-ui__date--disabled and aria-disabled, and clicks are ignored.

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/index.css";
3
4new DatepickerUI("#date", {
5  ui: { fixedWeeks: true, outsideDays: { selectable: false } },
6}).create();

calendar.renderDate returns content shown under the day number, such as a price. Return a string, a Node, or null for nothing. A string is always text and never HTML. The text is also appended to the accessible name of the day. An error thrown inside is rethrown asynchronously and the day gets no content.

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/index.css";
3
4new DatepickerUI("#date", {
5  calendar: {
6    renderDate: (date) =>
7      date.getDate() % 3 === 0 ? `$${80 + date.getDate() * 2}` : null,
8  },
9}).create();

Cells with content get the class dp-ui__date--has-content, and the rows grow to fit it.

calendar.decorateDate returns a DateDecoration for a day, or undefined. An error thrown inside is rethrown asynchronously and the day counts as undecorated.

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/index.css";
3
4new DatepickerUI("#date", {
5  calendar: {
6    decorateDate: (date) =>
7      date.getDay() === 5
8        ? { className: "payday", badge: true, label: "Payday" }
9        : undefined,
10  },
11}).create();

• Several months example
• Range presets example
• Two range fields example
• Outside days example
• Decorated dates example
• Per-day content example
• Options reference