DateTimePicker

Inputs & Controls

DateTimePicker

Coordinated date and time selection component built on top of picker primitives.

Usage

Capture timestamp values in a single cohesive control.

Highlights

• Handles timezone-safe conversions
• Plugs into date/time utilities

When to use it

• Booking or scheduling forms that require time precision.
• Any workflow that combines DatePicker + TimePicker.

Related components

DatePickerModalTimePicker

Examples

Default

Preview (Web)

import { useState } from 'react';
import { DateTimePicker } from 'react-native-molecules/components/DateTimePicker';

export default function Example() {
  const [date, setDate] = useState<Date | null>(new Date());

  return <DateTimePicker date={date} onChange={setDate} />;
}

Prop	Type	Default	Description
is24Hour	boolean | undefined	—	—
date	Date | null | undefined	—	—
onChange	((date: Date | null) => void) | undefined	—	—
defaultValue	Date | null | undefined	—	—
timePickerFieldProps	Omit<Partial<TimePickerFieldProps>, "onChangeText" | "value" | "date" | "onTimeChange"> | undefined	—	—
datePickerInputProps	Omit<Partial<DatePickerInputProps>, "onChange" | "value"> | undefined	—	—
datePickerInputRef	RefObject<TextInputHandles | null> | undefined	—	—
timePickerInputRef	RefObject<TextInputHandles | null> | undefined	—	—
Wrapper	ComponentType<any> | undefined	—	—
style	ViewStyle | undefined	—	—

Defined in react-native-molecules/components/DateTimePicker