The range calendar plus an optional wall-clock row. Emits the same strings as a native date or datetime-local input, so it swaps 1:1 for a two-field pair.
Date onlyWith timeTwo monthsPhone disclosure
June 2026
2026-06-08T08:00 → 2026-06-17T20:00
<DateRangePicker bind:from bind:to time />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { DateRangePicker } from '@chanrg/4ui';<DateRangePicker bind:from bind:to time />Composition
Use the following composition to build a date range picker:
DateRangePicker └── RangeCalendar
Date only
Emits YYYY-MM-DD, a drop-in for a pair of native date inputs.
June 2026
2026-06-08 → 2026-06-17
<DateRangePicker bind:from bind:to />With time
Set time to add the wall-clock row and emit YYYY-MM-DDTHH:MM instead.
June 2026
2026-06-08T08:00 → 2026-06-17T20:00
<DateRangePicker bind:from bind:to time />API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
from / to | string | '' | 'YYYY-MM-DD', or 'YYYY-MM-DDTHH:MM' when `time` is set. |
time | boolean | false | Adds the From/To clock row and emits datetime strings. |
months | 1 | 2 | 1 | Passed to the calendar. |
min / max / weekStartsOn / compact / locale | — | — | Forwarded to RangeCalendar. |
labels | Partial<DateRangePickerLabels> | English | From/To field and clock labels. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- Time inputs are native and labelled; the calendar keeps its own grid semantics.
- On phones a labelled disclosure button summarises the range and toggles the calendar.