Date Range Input @astryx-svelte/core v0.3.0 · DateRangeInput
Usage
DateRangeInput lets users select a start and end date from a dual-month calendar popover. Use it for filtering data by time period, report generation, analytics dashboards, and booking flows.ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Use presets for common ranges like "Last 7 days" to speed up selection. |
| Do | Use min/max to constrain selectable dates to valid ranges. |
| Do | Keep hasClear enabled (default) so users can reset the filter. |
| Do | Provide clear labels and descriptions so users understand what the range controls. |
| Don't | Use DateRangeInput when only a single date is needed; use DateInput instead. |
| Don't | Hide the label without surrounding context that makes the purpose obvious. |
| Don't | Wrap a disabled DateRangeInput in Tooltip to explain why it is disabled; disabled triggers swallow the hover events the wrapper needs. Use the disabledMessage prop instead. |
Examples
Common configurations, variations, and states.DateRangeInput — With Presets
Date range picker with quick-select presets for common periods. Use for analytics dashboards, report filters, or any context where users frequently select standard time windows.
DateRangeInput — Validation
Date range input in all three status states: error, warning, and success. Use to surface booking conflicts, flag high-demand periods, or confirm an available range.