REACT-NATIVES

WIRED FOR SPEED

react-natives v2.1.2

Theme

Light

Dark

Get Started

Components

Form Controls

DatePicker

A date selection component with a trigger input and calendar content.

Example

Preview

Code

Props

DatePicker Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes to apply to the date picker container.

value

Date

—

The currently selected date.

onChange

(date: Date) => void

—

Callback invoked when a date is selected.

isOpen

boolean

—

Controlled open state of the date picker.

onOpenChange

(open: boolean) => void

—

Callback invoked when the open state changes.

DatePickerTrigger Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the trigger wrapper.

DatePickerInput Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the date input field.

placeholder

string

—

Placeholder text for the date input.

format

string

—

The date format string (e.g. "MM/dd/yyyy").

DatePickerContent Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the calendar content area.

Usage Guidelines

When to use

Use DatePicker for selecting specific dates in forms, filters, or scheduling interfaces.

Best practices

•

Provide a clear date format hint in the placeholder or label.

•

Allow manual text entry in addition to calendar selection for accessibility.

•

Set sensible min/max date bounds to prevent invalid selections.

Accessibility

DatePicker supports keyboard navigation through the calendar grid. The selected date is announced to screen readers. Arrow keys navigate between days.

Related Components

Calendar

A full-featured calendar component supporting day, week, and month time ranges with horizontal and vertical layouts, team member columns, and event rendering.

Input

A compound text input component with support for leading/trailing slots, icons, and multiple visual variants.

Popover

A positioned overlay that appears relative to a trigger element.

React-Natives

A comprehensive React Native component library.

Documentation

Getting Started

Components

Theming

Community

GitHub

Discord

Twitter

Blog

Support

FAQ

Contact

Contributing

License