DocyFieldDate

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

iOSAndroid

Preview DocyFieldDate on your device

Scan with Expo Go

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

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

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

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

<DocyFieldDate
  name="birthday"
  label="Birthday"
  value={date}
  onChange={setDate}
  dateFormat="long"
  clearable
/>

Time Picker

<DocyFieldDate
  name="alarm"
  label="Alarm Time"
  mode="time"
  value={time}
  onChange={setTime}
  timeFormat="24h"
/>

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 DocyFieldBaseProps (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)

DocyFieldDate

On this page