Disabled Dates
The DateRange allows you to disable the selection of specific dates by providing a disabledDates value to the DateRangePopup component. This feature is useful for preventing selection of invalid dates, such as holidays, weekends, or dates when services are unavailable.
The DateRange supports the following approaches for disabling dates:
- Using a function—Provides maximum flexibility by allowing you to implement custom logic for date validation. The format for this input is
(date: Date) => boolean. The approach disables each date for which the provided function returnstrue. - Using an array of dates—Ideal for disabling specific known dates, such as holidays or scheduled maintenance days. The format for this input is
Date[]. The approach disables only the dates that are explicitly listed. - Using an array of days—Perfect for disabling recurring patterns, such as weekends or specific days of the week when your business is closed. The format for this input is
Day[]. The approach disables the specified days of the week.
Using a Function
The function approach provides the most flexibility for implementing complex date validation logic. You can combine multiple conditions, perform calculations, or integrate with external data sources to determine which dates should be disabled.
The following example demonstrates how to provide a function to disable past dates, weekends, and dates beyond 30 days from today.
Using a Date Array
The date array approach is ideal when you have a specific list of dates that should be disabled, such as company holidays, scheduled maintenance windows, or blackout dates. This method is straightforward and performs well with moderate-sized lists.
The following example demonstrates how to provide an array of dates to disable specific company holidays and maintenance days.
Using a Day Array
The day array approach is perfect for implementing recurring patterns based on days of the week. This is commonly used for business applications that need to restrict selections to working days or prevent scheduling on weekends.
The following example demonstrates how to provide an array of Day enum values to disable weekends (Saturday and Sunday).