DatePicker
Calendar-based date selection with range support, locale-aware formatting, timezone handling, and keyboard navigation
DatePicker
A flexible date picker with range selection, shortcuts, restrictions and custom formats. Optimized for dashboards and filters in Saha UI.
Variants
Use the variant prop to match the surrounding surface.
Default
Primary
Secondary
Outlined
Minimal
Sizes
Use size to adapt the trigger to compact forms or larger hero filters.
Small
Medium
Large
Single vs range selection
Use asSingle for single date selection, or useRange to select a start and end date.
Single date
Value: 12/22/2025
Date range
Range: None
Shortcuts & quick ranges
Enable showShortcuts to display helpful range presets like “Last 7 days”.
Range: None
Date restrictions
Restrict selection with minDate, maxDate or disabledDates.
Min / max dates
Only dates within the next 30 days can be selected.
Disabled ranges
Holiday ranges are disabled.
Custom formats & separators
Customize display formatting with displayFormat, separator and other configs.
Custom format
Display dates using a day-first format.
Custom separator
Customize how ranges read in the input text.
Usage Guidelines
When to Use
- Date input fields
- Booking systems
- Event scheduling
Accessibility
- Full keyboard navigation
- Screen reader announces dates
- Focus management in calendar
Performance
- Month-based rendering
- Lazy calendar generation
Common Mistakes
- Not restricting invalid dates
- Missing timezone handling
Frequently Asked Questions
Related Components
View allAsynchronous search input with debounced queries, virtual scrolling for large datasets, and keyboard-driven selection
Accessible checkbox input with indeterminate state support and form integration
Accessible CheckboxGroup for multi-selection, and form integration
Color selection component with preset colors, HEX/RGB/HSL input, and visual picker interface