Rules, limits and badges

One vocabulary covers every kind of rule. Mix the forms freely:

createDatePicker(input, {
  min: '2026-09-01',
  max: '2026-12-31',
  disabled: [
    '2026-12-25',                              // one date
    { from: '2026-10-01', to: '2026-10-05' },  // a range (either end optional)
    { weekdays: [5, 6] },                      // Fridays and Saturdays (ISO: 1 = Monday)
    (iso) => holidays.has(iso),                // anything else
  ],
});

enabled takes the same forms and inverts them: only matching dates can be chosen. For example, enabled: [{ weekdays: [1] }] allows Mondays only. min, max and disabled still apply on top.

A disabled day:

• is struck through and marked aria-disabled;
• can't be clicked;
• rejects a typed date with That date isn't available.

Navigation stops at the months that contain min and max.

Badges and per-day styling#

decorate runs for each visible day. Use it for prices, availability or holidays:

createDatePicker(input, {
  decorate: (iso) => {
    const day = availability[iso];
    if (!day) return;
    if (day.left === 0) return { badge: 'Full', disabled: true };
    return { badge: `AED ${day.price}`, label: `${day.left} rooms left`, className: day.left < 3 ? 'is-scarce' : '' };
  },
});

• badge is shown under the number.
• label is added to the day's accessible name, so screen reader users hear Friday, 18 September 2026, 2 rooms left.
• disabled: true makes the day unselectable.

Range rules#

createDateRangePicker(input, { minLength: 2, maxLength: 14 });

After the first click, days the second click can't reach are disabled. That covers anything past maxLength, and anything beyond a disabled day unless allowDisabledInside is set, so people aren't rejected after they choose. A typed range that breaks a rule gets a message saying which rule.