# DocyFieldDate
URL: /docs/native/expo/date

Native date/time picker form field using @react-native-community/datetimepicker.

## Overview

`DocyFieldDate` provides a native date, time, or datetime picker. On iOS it uses an ActionSheet with a spinner picker; on Android it opens the native dialog.

## 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 { DocyFieldDate } from '@/components/docyrus-native/form-fields/docy-field-date';

const [date, setDate] = useState<Date | null>(null);

```

### Time Picker

```tsx

```

## API Reference

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | `Date \| null` | `null` | Selected date |
| `onChange` | `(date: Date \| null) => void` | — | Called when date changes |
| `onBlur` | `() => void` | — | Blur handler |
| `onFocus` | `() => void` | — | Focus handler |
| `mode` | `'date' \| 'datetime' \| 'time'` | `'date'` | Picker mode |
| `minimumDate` | `Date` | — | Minimum selectable date |
| `maximumDate` | `Date` | — | Maximum selectable date |
| `dateFormat` | `'short' \| 'medium' \| 'long' \| 'full'` | `'medium'` | Date format preset |
| `timeFormat` | `'12h' \| '24h'` | `'12h'` | Time format |
| `format` | `string` | — | Custom pattern (e.g., `"dd/MM/yyyy HH:mm"`) |
| `clearable` | `boolean` | `true` | Show clear button |
| `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 spinner picker + Cancel/Done buttons |
| Android | Native date picker dialog |
| Web | Fallback message (native picker not available) |

## Type Exports

| Type | Description |
|------|-------------|
| `DocyFieldDateProps` | Props for DocyFieldDate component |

## Compatibility

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