DateRangePicker

Data & Editing

Date range selection with preset ranges like 'Last 7 days', 'This month'.

Live Demo

Select a preset range or custom dates.

Selected range: last_7_days

Compact variant:

<script>
  import { DateRangePicker } from "jatui"
</script>

<DateRangePicker />

Prop	Type	Default	Description
`selectedRange`	`string`	`"all"`	Active range preset
`customFrom`	`string \| null`	`null`	Custom start date
`customTo`	`string \| null`	`null`	Custom end date
`onRangeChange`	`(range, from?, to?) => void`	`-`	Range change callback
`compact`	`boolean`	`false`	Compact display mode