DateTimeRangePicker

A date-time range picker in a bottom sheet — start/end tabs, calendar, time controls, draft editing with Save / Cancel and an inline clear button.

Edit on GitHubEditllms.txt

iOSAndroid

Preview DateTimeRangePicker on your device

Scan with Expo Go

iOS Android

Download Expo Go, then scan the QR code to preview native components.

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-date-time-range-picker

Installs day-picker (calendar), mini-calendar, action-sheet, button, label and docyrus-icon as registry dependencies.

Usage

import { DateTimeRangePicker } from '@/components/docyrus-native/date-time-range-picker';

const [start, setStart] = useState<Date | null>(null);
const [end, setEnd] = useState<Date | null>(null);

<DateTimeRangePicker
  label="Meeting"
  startDate={start}
  endDate={end}
  onChange={(s, e) => {
    setStart(s);
    setEnd(e);
  }}
/>

Opening the sheet copies the committed range into a draft. Day taps and time changes only edit the draft. Save calls onChange(start, end) (an end before the start is clamped to the start); Cancel, the backdrop and swiping the sheet away discard the draft.

Fixed duration

<DateTimeRangePicker defaultDuration={60} startDate={start} endDate={end} onChange={onChange} />

With defaultDuration every change of the start day or time moves the end to start + N minutes. The end tab stays editable.

Clearing

While a value is set, clearable (default true) shows an inline "x" on the trigger that immediately calls onChange(null, null).

12-hour clock

<DateTimeRangePicker use24HourFormat={false} startDate={start} endDate={end} onChange={onChange} />

When use24HourFormat is omitted and a <DateFormatProvider> (e.g. DocyrusTenantProvider) is mounted, the trigger uses the tenant's formatDateTime / formatTime; otherwise it renders 24-hour times.

API Reference

Prop	Type	Default	Description
`startDate`	`Date \| null`	—	Committed range start.
`endDate`	`Date \| null`	—	Committed range end.
`onChange`	`(start: Date \| null, end: Date \| null) => void`	—	Called on Save (with the draft) and on clear (`null, null`).
`minDate`	`Date`	—	Minimum selectable date. The end tab additionally can't go before the draft start day.
`maxDate`	`Date`	—	Maximum selectable date.
`minuteInterval`	`number`	`5`	Minute step of the time controls (the seed time is rounded to it).
`disabled`	`boolean`	`false`	Disables the trigger and hides the clear button.
`placeholder`	`string`	`messages.placeholder`	Trigger text while empty.
`label`	`string`	—	Optional label rendered above the trigger.
`use24HourFormat`	`boolean`	—	`true` = 24-hour, `false` = 12-hour with an AM/PM toggle. Omitted → `DateFormatProvider` for the trigger, 24-hour controls.
`size`	`'sm' \| 'md' \| 'lg' \| 'default'`	`'md'`	Trigger and label size (`'default'` is the web alias of `'md'`).
`defaultDuration`	`number`	—	Keep the end at `start + N` minutes whenever the start changes.
`clearable`	`boolean`	`true`	Show the inline clear "x" on the trigger while a value is set.
`weekStartsOn`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6`	`0`	First day of the calendar week.
`messages`	`Partial<DateTimeRangePickerMessages>`	—	App-supplied copy; wins over `<UiTranslationProvider>`.
`className`	`string`	—	Additional CSS classes for the wrapper.
`style`	`ViewStyle`	—	Wrapper style.