DateTimePicker

A Jetpack Compose DateTimePicker component for selecting dates and times.

Android

GitHub

npm

Changelog

Bundled version:

~55.0.0

Expo UI DateTimePicker matches the official Jetpack Compose Date Picker and Time Picker APIs and supports date, time, and combined selection.

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.

Usage

Date picker

DatePickerExample.tsx

import { useState } from 'react';
import { Host, DateTimePicker } from '@expo/ui/jetpack-compose';

export default function DatePickerExample() {
  const [selectedDate, setSelectedDate] = useState(new Date());

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

Time picker

TimePickerExample.tsx

import { useState } from 'react';
import { Host, DateTimePicker } from '@expo/ui/jetpack-compose';

export default function TimePickerExample() {
  const [selectedDate, setSelectedDate] = useState(new Date());

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

Input variant

Use variant="input" to display the picker as a text input field instead of the default picker UI.

InputVariantExample.tsx

import { useState } from 'react';
import { Host, DateTimePicker } from '@expo/ui/jetpack-compose';

export default function InputVariantExample() {
  const [selectedDate, setSelectedDate] = useState(new Date());

  return (
    <Host matchContents>
      <DateTimePicker
        onDateSelected={date => {
          setSelectedDate(date);
        }}
        displayedComponents="date"
        initialDate={selectedDate.toISOString()}
        variant="input"
      />
    </Host>
  );
}

API

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

Component

`DateTimePicker`

Android

Type: React.Element<DateTimePickerProps>

Renders a DateTimePicker component.

DateTimePickerProps

`color`

Android

Optional • Type: ColorValue

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.

`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'