Restrict date selection using min/max dates, disable specific weekdays, blacklist specific dates, or use custom logic for complex business rules.

Multiple restriction methods can be combined. The date picker evaluates all restrictions together to determine if a date is selectable.

Min and Max Dates

Set date range boundaries

Live Demo

Only dates in 2025 are selectable

Code Examples
HTML 
 
 
JavaScript 
 
 
 
Details
 
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.
 
Disabled Weekdays
 
Disable specific days of the week
 
Live Demo
  
Weekends (Saturday and Sunday) are disabled
 
Code Examples
 
HTML 
 
 
 
JavaScript 
 
 
 
Details
 
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.
 
Disabled Dates (Specific Dates)
 
Disable a list of specific dates
 
Live Demo
   
New Year and Christmas holidays are disabled
 
Code Examples
 
HTML + JavaScript 
 
 
 
JavaScript 
 
 
 
Details
 
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.
 
Custom Disable Logic (Callback)
 
Use functions for complex or dynamic rules
 
When to Use
 
Use Callback When:
 
  • Complex logic - Multiple conditions, date ranges, calculations
    •  
  • Dynamic data - Rules change based on other selections
    •  
  • Large datasets - Thousands of disabled dates (compute on-the-fly)
    •  
  • Date ranges - Disable ranges instead of individual dates
 
Use Array When:
 
  • Simple list - Fixed set of specific dates
    •  
  • Small dataset - Hundreds of dates or fewer
    •  
  • Static data - Holidays that don't change
 
Code Examples
 
JavaScript API 
 
 
 
Web Component 
 
 
 
Details
 
Function Signature
 
getDateMetadataCallback: (date: Date) => boolean
 
  • Receives: Date object for the cell being rendered
    •  
  • Returns: true to disable, false 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.
 
Advanced: Date Metadata Callback
 
Disable dates AND provide styling via single callback
 
Use Case
 
Why Use getDateMetadata?
 
When you need to BOTH disable dates AND apply custom styling/tooltips, use getDateMetadata instead of separate getDateMetadataCallback and specialDates.
 
Single Source of Truth
 
One callback provides all date metadata:
 
  • Disabled state
    •  
  • Custom CSS classes
    •  
  • Tooltips
    •  
  • Badges
 
Example Scenario
 
Hotel booking system:
 
  • Fully booked dates → Disabled + red styling + "Fully booked" tooltip
    •  
  • Limited availability → Enabled + orange styling + "2 rooms left" tooltip
    •  
  • Available dates → Enabled + default styling
 
Code Examples
 
Hotel Booking Example 
 
 
 
Multi-State Booking 
 
 
 
Details
 
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
 
ApproachProsCons
getDateMetadataCallbackSimple, focusedSeparate from styling
specialDatesStatic dataNot dynamic
getDateMetadataSingle source, dynamicSlightly more complex
 
Performance
 
Called once per visible date cell, just like getDateMetadataCallback. Keep logic efficient.
 
Combining Multiple Restrictions
 
How different restriction methods interact
 
Evaluation Order
 
Restriction Evaluation
 
A date is disabled if ANY of these conditions are true:
 
  1. Date is before minDate
    2.  
  2. Date is after maxDate
    3.  
  3. Day of week is in disabledWeekdays
    4.  
  4. Date is in disabledDates array
    5.  
  5. getDateMetadataCallback(date) returns true
    6.  
  6. getDateMetadata(date).isDisabled is true
 
All Restrictions Are Additive
 
If you set multiple restrictions, they ALL apply. You cannot "override" one with another.
 
Example
 
All Restrictions Combined 
 
 
 
Details
 
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();
 
Quick Reference
 
Restriction Methods
 
MethodBest For
minDate/maxDateDate range boundaries
disabledWeekdaysWeekly patterns
disabledDatesFixed list of dates
getDateMetadataCallbackComplex logic
getDateMetadataDisable + styling
 
Common Patterns
 
  • Future only - minDate: new Date()
    •  
  • Weekdays only - disabledWeekdays: [0, 6]
    •  
  • This year - minDate: '2025-01-01', maxDate: '2025-12-31'
    •  
  • Holidays - disabledDates: [...]
    •  
  • Bookings - getDateMetadataCallback: (date) => {...}