Min and Max Date

Limit the selectable days to a window with @pglejzer/datepicker-ui.

From today

calendar.minDate and maxDate accept a Date, an ISO YYYY-MM-DD string or "today". With minDate: "today" past days are disabled.

minDate today

Date

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

A fixed window

#

Two ISO strings give a fixed window. The calendar opens on the nearest month inside the limits, and a typed date outside them shows labels.beforeMinDate or labels.afterMaxDate.

Fixed window

Date

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/index.css";
3
4new DatepickerUI("#date", {
5  calendar: { minDate: "2030-06-05", maxDate: "2030-06-25" },
6}).create();

Docs: Disabled Dates · Typed Input · Options