DatePicker
A date field with an anchored calendar and local ISO date values.
Installation
Import from the Reflow workspace package.
Playground
Open demoimport { DatePicker } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<DatePicker label="Choose dates" variant="ghost" timeRange defaultTime="11:00" defaultEndTime="12:45" defaultValue={today} numberOfMonths={2} />
</>
)
}Date
Opens on the selected day, or today. Pick one and it closes.
import { DatePicker } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<DatePicker label="Start date" />
</>
)
}Range with presets
Pick a start and an end, or a preset. It closes once the end is set.
import { DatePicker } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<DatePicker label="Travel dates" mode="range" numberOfMonths={2}
presets={[
{ label: 'Next 7 days', value: { start: today, end: in6Days } },
{ label: 'Next 14 days', value: { start: today, end: in13Days } },
{ label: 'Next 30 days', value: { start: today, end: in29Days } },
{ label: 'This weekend', value: { start: saturday, end: sunday } },
]} />
</>
)
}Date and time
Type 1130 or 11:30am, or arrow through the slots. Changing the start preserves the duration.
import { DatePicker } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<DatePicker label="Meeting" variant="ghost" timeRange
defaultValue={today} defaultTime="11:00" defaultEndTime="12:45" />
</>
)
}One time
time takes one time instead. Type a time or choose a slot.
import { DatePicker } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<DatePicker label="Deadline" time />
</>
)
}Booked days
booked marks nights, min closes past days.
import { DatePicker } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<DatePicker label="Stay dates" mode="range" numberOfMonths={2} placeholder="Check in → check out"
booked={[in3Days, in4Days, in5Days, in11Days, in12Days]} min={today} />
</>
)
}API Reference
Public props for the Reflow implementation. Native controls also accept their standard HTML attributes and Remix event mixes.
DatePicker
| Prop | Type | Default | Description |
|---|---|---|---|
clearable | boolean | — | Adds a button that clears the selected date or range and returns focus to the picker. |
placeholder | string | — | Hint shown while the value is empty. |
disabled | boolean | — | Prevents interaction and conveys the disabled state. |
closeOnSelect | boolean | true | Closes the calendar after a complete selection. |
size | "default" | "compact" | — | Control density or icon-button dimensions. |
variant | "ghost" | "outline" | outline | Visual or layout treatment. |
time | boolean | — | Includes a time field in the date picker. |
timeRange | boolean | — | Adds start/end time slots and a duration. Editing the start preserves the duration up to 23:59. |
step | number | — | Minutes between time slots; defaults to 15. |
hourCycle | 12 | 24 | — | Clock display; defaults to 12. |
locale | string | — | Time display locale; defaults to en-US for consistent server rendering. |
timeValue | string | — | Controlled start time in HH:mm format. |
defaultTime | string | — | Initial start time. |
onTimeChange | ((value: string) => void) | — | Called when the start time changes. |
endTimeValue | string | — | Controlled end time. |
defaultEndTime | string | — | Initial end time. |
onEndTimeChange | ((value: string) => void) | — | Called when the end time changes. |
presets | readonly { label: string; value: DateValue; }[] | — | Named date or date-range shortcuts. |
label | string | Choose a date | Accessible name or visible label for the control. |
mode | "single" | "range" | — | Select one date or a date range. |
value | DateValue | — | Current value when controlled by the parent. |
defaultValue | DateValue | null | Initial value for an uncontrolled component. |
onValueChange | ((value: DateValue) => void) | — | Called when the selected value changes. |
min | string | — | Minimum allowed value. |
max | string | — | Maximum allowed value. |
isDateDisabled | ((date: string) => boolean) | — | Determines whether a date is unavailable. |
defaultMonth | string | — | Initially displayed month as a local ISO date. |
today | string | — | Pin today to a YYYY-MM-DD date shared by server and client. Otherwise the initial render uses UTC and switches to the visitor’s local day after hydration. |
name | string | — | Name used when the control participates in a form. |
weekStartsOn | 0 | 1 | — | First weekday. Zero is Sunday and one is Monday. |
showWeekNumbers | boolean | — | Displays ISO week numbers. |
numberOfMonths | 2 | 1 | — | Number of calendar months shown together. |
orientation | "horizontal" | "vertical" | — | Layout direction. |
booked | readonly string[] | — | Dates marked as unavailable. |
available | readonly string[] | — | Explicit set of selectable dates. |
minNights | number | — | Minimum nights in a selected date range. |
maxNights | number | — | Maximum nights in a selected date range. |
dayDetail | ((date: string) => RemixNode) | — | Additional content inside a date cell. |
cellSize | number | — | Date-cell dimension in pixels. |
DateRange
| Prop | Type | Default | Description |
|---|---|---|---|
start* | string | — | First date in the range. |
end | string | — | Last date in the range. |