Range Length Limits

Bound how many days a date range may span with @pglejzer/datepicker-ui.

Minimum and maximum length

calendar.range.minLength and maxLength bound a range in days, with both ends counted. Here a range must cover 3 to 14 days. A typed range that breaks the limits shows labels.invalidRange.

3 to 14 days

Date

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

Future dates only

#

The limits combine with the other calendar rules. Adding minDate: "today" keeps past days out of the range as well.

3 to 14 days from today

Date

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/index.css";
3
4new DatepickerUI("#dates", {
5  calendar: {
6    mode: "range",
7    minDate: "today",
8    range: { minLength: 3, maxLength: 14 },
9  },
10}).create();

Docs: Selection Modes · Disabled Dates · Options