Limits and availability

Length#

createDateRangePicker(input, { minLength: 3, maxLength: 30 });

Lengths count both ends, so a single day is 1. For hotel stays, check-in on the 10th and check-out on the 12th is 3 days and 2 nights, which is minLength: 3.

After the first click, days beyond maxLength are disabled, so people can't pick a range the picker would then reject.

If a range is too short, the calendar stays open and says Choose at least 3 days.

Disabled days#

createDateRangePicker(input, {
  min: '2026-09-01',
  disabled: [{ weekdays: [5] }, { from: '2026-12-20', to: '2027-01-03' }, (iso) => soldOut.has(iso)],
});

Disabled days can't start or end a range. By default a range can't contain one either: once the start is chosen, everything past the next disabled day is greyed out.

Crossing closed days. When a range may span them, as with a rental across a holiday, allow it:

createDateRangePicker(input, { disabled: holidays, allowDisabledInside: true });

Prices and badges#

createDateRangePicker(input, {
  decorate: (iso) => {
    const night = rates[iso];
    if (!night) return;
    return night.left ? { badge: `${night.price}`, label: `AED ${night.price}, ${night.left} left` } : { badge: 'Full', disabled: true };
  },
});

• badge is visible under the day number.
• label is read by screen readers.
• disabled removes the day from selection.

Checking in code#

picker.getProblem(); // 'too_short' | 'too_long' | 'contains_disabled' | null