Single, Range and Multiple Date Selection

calendar.mode is "single" (the default), "range" or "multiple".

DateValue has three fields. getValue() returns null when nothing is committed or a range has no end yet. setValue() emits an error event with the code invalid-date when the value does not fit the mode, and it does not emit confirm.

1type DateValue = {
2  value: string;     // ISO YYYY-MM-DD
3  date: Date;        // local midnight
4  formatted: string; // the text as the input shows it
5};

calendar.range.minLength and calendar.range.maxLength bound a range in days, both ends included. The demo accepts 2 to 14 days.

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/index.css";
3
4const picker = new DatepickerUI("#range", {
5  calendar: { mode: "range", range: { minLength: 2, maxLength: 14 } },
6});
7picker.create();
8
9picker.setValue({ start: "2025-03-14", end: "2025-03-20" });
10picker.getValue();
11// { start: DateValue, end: DateValue }

calendar.multiple.max bounds the number of dates. Clicking a selected day removes it. behavior.closeOnSelect is not used in this mode.

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/index.css";
3
4const picker = new DatepickerUI("#dates", {
5  calendar: { mode: "multiple", multiple: { max: 5 } },
6});
7picker.create();
8
9picker.setValue(["2025-03-14", "2025-03-16"]);
10picker.getValue();
11// DateValue[], sorted

• calendar.range.minLength and calendar.range.maxLength for ranges.
• calendar.multiple.max for multiple dates.
• calendar.minDate, maxDate, disabledDates, enabledDates, disabledWeekdays and isDateDisabled decide which days can be selected. See Disabled Dates.

When the input has a name, the picker moves the name to a hidden input placed after it, so a form submits ISO values instead of the displayed text. The hidden input is removed and the name restored on destroy().

1<form>
2  <input id="date" name="birthday" />
3  <button type="submit">Send</button>
4</form>

An incomplete range gives an empty string. The visible input gets input and change events when a value is committed, and a form reset restores the initial value. With ui.endInput, each field with a name gets its own hidden ISO input.

On create(), the picker reads the existing input text, either in the serialized form above or in the display format.

• Date range example
• Multiple dates example
• Range limits example
• Methods reference
• TypeScript types