Date Range

Set calendar.mode to "range". The first click sets the start and the second sets the end. The input shows both dates, and the confirmed value is a { start, end } pair of date values.

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

A range picker in a modal opens full screen below 600 px wide, with Save and Close buttons. ui.fullscreen changes that width: a number is the width in pixels, and false never goes full screen. Resize the window below 600 px and open this demo to see it.

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