DocyFieldDatetime

Combined date and time picker form field — thin wrapper around DocyFieldDate.

iOSAndroid

Preview DocyFieldDatetime on your device

Scan with Expo Go

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

Overview

DocyFieldDatetime is a convenience wrapper around DocyFieldDate with mode="datetime" always set. It presents both a date and time picker in a single interaction.

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

const [dateTime, setDateTime] = useState<Date | null>(null);

<DocyFieldDatetime
  name="meeting"
  label="Meeting Time"
  value={dateTime}
  onChange={setDateTime}
  dateFormat="long"
  timeFormat="24h"
/>

API Reference

All props from DocyFieldDate except mode (always 'datetime').

Prop	Type	Default	Description
`value`	`Date \| null`	`null`	Selected date and time
`onChange`	`(date: Date \| null) => void`	—	Called when value changes
`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
`clearable`	`boolean`	`true`	Show clear button

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

Type Exports

Type	Description
`DocyFieldDatetimeProps`	`Omit<DocyFieldDateProps, 'mode'>`