Inputs · §10.3

Date range picker

Presets and a custom range for analytics.

Theme
Contrast
Language
Motion
Text size

Code

<DateRangePicker onValueChange={setRange} t={t} today={today} value={range} />

Accessibility

  • The trigger reads the period; presets are buttons; the calendar is keyboard navigable.

Usage

Do

  • Local calendar days, not instants.

Don't

  • Never allow a range in the future.

Platforms

Web
apps/web/components/edflow/date-range-picker.tsx, apps/web/components/ui/popover.tsx
iOS
SwiftUI DatePicker pair
Android
Compose DateRangePicker