DocyFieldDateRange

Date range picker form field with start/end selector using native date picker.

iOSAndroid

Preview DocyFieldDateRange on your device

Scan with Expo Go

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

Overview

DocyFieldDateRange provides a start and end date picker. On iOS it uses an ActionSheet with tab-based Start/End switching; on Android it opens sequential native date picker dialogs.

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-form-fields

# Required: @react-native-community/datetimepicker
npx expo install @react-native-community/datetimepicker

Required Packages(1 package)

pnpm add @react-native-community/datetimepicker

Usage

import { DocyFieldDateRange } from '@/components/docyrus-native/form-fields/docy-field-date-range';

const [range, setRange] = useState<{
  startDate: Date | null;
  endDate: Date | null;
}>({ startDate: null, endDate: null });

<DocyFieldDateRange
  name="vacation"
  label="Vacation Period"
  value={range}
  onChange={setRange}
  dateFormat="long"
  clearable
/>

API Reference

Prop	Type	Default	Description
`value`	`DocyFieldDateRangeValue`	`{ startDate: null, endDate: null }`	Start and end dates
`onChange`	`(value: DocyFieldDateRangeValue) => void`	—	Called when value changes
`onBlur`	`() => void`	—	Blur handler
`onFocus`	`() => void`	—	Focus handler
`minimumDate`	`Date`	—	Minimum selectable date
`maximumDate`	`Date`	—	Maximum selectable date
`dateFormat`	`'short' \| 'medium' \| 'long' \| 'full'`	`'medium'`	Date format preset
`format`	`string`	—	Custom date pattern
`separator`	`string`	`' – '`	Separator between start and end display
`clearable`	`boolean`	`true`	Show clear button
`allowSameDate`	`boolean`	`true`	Allow start and end to be the same date
`calendarIcon`	`ReactNode`	—	Custom calendar icon
`clearIcon`	`ReactNode`	—	Custom clear icon
`iconSize`	`number`	`20`	Icon size in pixels
`iconColor`	`string`	—	Icon color override

Inherits all DocyFieldBaseProps (name, label, placeholder, helpText, required, disabled, readOnly, error, size, variant, etc.)

Platform Behavior

Platform	Behavior
iOS	ActionSheet with Start/End tabs + spinner picker
Android	Sequential native date picker dialogs
Web	Fallback message (native picker not available)

Type Exports

Type	Description
`DocyFieldDateRangeValue`	`{ startDate: Date \| null; endDate: Date \| null }`
`DocyFieldDateRangeProps`	Props for DocyFieldDateRange component

Compatibility

Platform	Support
Expo Go	Yes
Dev Client	Yes
Bare RN	Yes (auto-linked)