Skip to main content

DatePickerInput

Inputs & Controls

DatePickerInput

Text input wrapper that provides masking, formatting, and shortcuts for dates.

Usage

Allow direct typing with fallback to modal or docked pickers.

Highlights

  • Locale-aware parsing
  • Syncs with Docked/Modal pickers via shared utils

When to use it

  • Power users prefer keyboard entry.
  • You need validation before committing the value.

Related components

DatePickerModalDatePickerInline

Examples​

Default​

Preview (Web)
import { useState } from 'react';
import { DatePickerInput } from 'react-native-molecules/components/DatePickerInput';

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

  return <DatePickerInput value={date} onChange={setDate} label="Reminder date" />;
}

Inherits: TextInputProps

Defined in react-native-molecules/components/DatePickerInput