Multiple Dates

Select any number of separate days with @pglejzer/datepicker-ui.

Multiple

Set calendar.mode to "multiple". Each click toggles a day. The confirmed value is an array of date values sorted by date.

Multiple

Date

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

Limit the count and the headline

#

calendar.multiple.max caps how many days can be selected. labels.multipleSelected is the modal headline. It takes a string or an object keyed by Intl.PluralRules categories, and {count} is replaced by the number of selected days. The demo opens as a modal on small windows, where the headline is visible.

Max 3 dates

Date

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/index.css";
3
4new DatepickerUI("#dates", {
5  calendar: { mode: "multiple", multiple: { max: 3 } },
6  labels: {
7    multipleSelected: {
8      one: "{count} date selected",
9      other: "{count} dates selected",
10    },
11  },
12}).create();

Docs: Selection Modes · Options