Use Cases

• Future only - Bookings that can't be in the past
• Date range limits - Restrict to specific year or quarter
• Business constraints - Only allow dates within fiscal year
• Age verification - Max date 18 years ago

Format

Dates can be specified as:

• String: "YYYY-MM-DD" ISO format
• Date object: new Date(2025, 0, 1)

Behavior

Dates outside the min/max range are grayed out and cannot be selected. Navigation buttons are disabled when reaching boundaries.

Weekday Numbers

• 0 - Sunday
• 1 - Monday
• 2 - Tuesday
• 3 - Wednesday
• 4 - Thursday
• 5 - Friday
• 6 - Saturday

Common Patterns

• 0,6 - Weekends disabled (weekdays only)
• 1,2,3,4,5 - Weekdays disabled (weekends only)
• 0 - Sundays disabled
• 6 - Saturdays disabled

Note

Web component attribute uses comma-separated string. JavaScript API uses array of numbers.

When to Use

Use disabledDates array when you have a fixed list of specific dates to disable:

• Company holidays
• Maintenance dates
• Already booked dates
• Blackout dates

Format

• Array of ISO date strings: ['2025-01-01', '2025-12-25']
• Array of Date objects: [new Date(2025, 0, 1), ...]

No Attribute Support

Due to limitations of web component attributes (can't pass arrays), you must set disabledDates via JavaScript property.

Performance

Efficient for moderate lists (100s of dates). For larger datasets or complex logic, use getDateMetadataCallback callback instead.

Function Signature

getDateMetadataCallback: (date: Date) => DateInfo | null

• Receives: Date object for the cell being rendered
• Returns: Object with isDisabled: true to disable, or {} / null to enable

Usage Patterns

JavaScript API: Pass getDateMetadataCallback in options during new DateRangePicker()

Web Component: Can also be set as a property on the element (picker.getDateMetadataCallback = ...)

Performance

Called once per visible date cell (~35-42 times per month view). Keep logic efficient. Avoid heavy computations or async operations.

Combining with Other Restrictions

The callback is evaluated in addition to min/max dates, disabled weekdays, and disabled dates array. A date is disabled if ANY restriction applies.

Return Type: DateInfo

The callback returns a DateInfo object with these optional properties:

• isDisabled: boolean - Disable this date
• badgeText: string - Text in badge row
• badgeClass: string - CSS class for badge
• badgeTooltip: string - Tooltip on badge hover
• dayClass: string - CSS class for day cell
• dayTooltip: string - Tooltip on day hover

Advantages vs Separate Options

Approach	Pros	Cons
getDateMetadataCallback	Simple, focused	Separate from styling
specialDates	Static data	Not dynamic
getDateMetadata	Single source, dynamic	Slightly more complex

Performance

Called once per visible date cell, just like getDateMetadataCallback. Keep logic efficient.

Strategy

• Use minDate/maxDate for hard boundaries
• Use disabledWeekdays for day-of-week patterns
• Use disabledDates for fixed lists (holidays, blackout dates)
• Use getDateMetadataCallback for complex or dynamic logic
• Use getDateMetadata when you need styling + disabling

Performance Consideration

Evaluation happens in order listed above (min/max checked first). The picker short-circuits as soon as ANY condition is true.

Debugging

Enable debug logging to see why dates are disabled:

window.components['web-daterangepicker'].logging.enableLogging();