This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 54).

DateTimePicker

GitHub

Changelog

npm

A Jetpack Compose DateTimePicker component for selecting dates and times.

Android

A date and time picker component that allows users to select dates, times, or both using native Android dialogs.

Installation

Terminal

- npx expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

Date time picker

import { DateTimePicker } from '@expo/ui/jetpack-compose';

<DateTimePicker
  onDateSelected={date => {
    setSelectedDate(date);
  }}
  displayedComponents='date'
  initialDate={selectedDate.toISOString()}
  variant='picker'
/>

See Official Jetpack Compose documentation for more information.

Time picker

import { DateTimePicker } from '@expo/ui/jetpack-compose';

<DateTimePicker
  onDateSelected={date => {
    setSelectedDate(date);
  }}
  displayedComponents='hourAndMinute'
  initialDate={selectedDate.toISOString()}
  variant='picker'
/>

See Official Jetpack Compose documentation for more information.

API

Component

`DateTimePicker`

Android

Type: React.Element<DateTimePickerProps>

Renders a DateTimePicker component.

DateTimePickerProps

`color`

Android

Optional • Type: string

The tint color to use on the picker elements.

`displayedComponents`

Android

Optional • Type: DisplayedComponents • Default: 'date'

The components that the picker should display. On Android, you can have a picker that selects just the date or just the time. dateAndTime is only available on iOS and will result in a date picker on Android. On iOS, you can have a picker that selects both date and time.

`initialDate`

Android

Optional • Literal type: union

The initial date to display on the picker.

Acceptable values are: string | null

`is24Hour`

Android

Optional • Type: boolean • Default: true

Determines what format the clock should be displayed in on Android.

`modifiers`

Android

Optional • Type: ExpoModifier[]

Modifiers for the component

`onDateSelected`

Android

Optional • Type: (date: Date) => void

Callback function that is called when a date is selected.

`showVariantToggle`

Android

Optional • Type: boolean • Default: true

Show to button to toggle between variants on Android.

`style`

Android

Optional • Type: StyleProp<ViewStyle>

Optional style to apply to the component.

`variant`

Android

Optional • Type: AndroidVariant • Default: 'picker'

The variant of the picker, which determines its appearance and behavior.

Types

`AndroidVariant`

Android

Literal Type: string

Acceptable values are: 'picker' | 'input'

`DisplayedComponents`

Android

Literal Type: string

Acceptable values are: 'date' | 'hourAndMinute' | 'dateAndTime'