# DocyFieldDateRange
URL: /docs/native/expo/date-range

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

## 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

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

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

**Dependencies:**
- [@react-native-community/datetimepicker](https://www.npmjs.com/package/@react-native-community/datetimepicker)

## Usage

```tsx
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 });

```

## 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 [rn-form-fields](/docs/native/docyrus/form-fields) (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) |