Components
DateTimeRangePicker
Picks a start and end date-time range, each with its own day and time of day.
DateTimeRangePicker captures a start and end date-time as a DateRange
({ from, to }), where each end carries both a date and a time of day. It is
controlled via value/onChange. Use it for bookings, shifts, or any window
that needs precise start/end times; label the two ends with startLabel and
endLabel.
Example
Preview
import { DateTimeRangePicker, type DateRange } from '@officina/ui';
import { useState } from 'react';
function BookingWindow() {
const [range, setRange] = useState<DateRange>({ from: undefined, to: undefined });
return (
<DateTimeRangePicker
value={range}
onChange={setRange}
startLabel="Check in"
endLabel="Check out"
/>
);
}API
| Prop | Type | Default | Description |
|---|---|---|---|
| onChange* | (value: DateRange) => void | — | Called with the next range when either date or time changes. |
| value* | DateRange | — | Selected start/end date-time range (controlled). |
| endLabel | string | End time | Label for the end date-time field. |
| placeholder | string | — | Placeholder text for the date inputs. |
| startLabel | string | Start time | Label for the start date-time field. |