DateTimePicker

A Jetpack Compose DateTimePicker component for selecting dates and times.

Android

Included in Expo Go

Recommended version:

~56.0.26

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

Note: The date variants render Material's calendar grid and input field, both of which scroll horizontally internally. The parent Host must provide a finite width on the horizontal axis, use matchContents={{ vertical: true }} together with style={{ width: '100%' }} (or any finite width). See Match contents in Host reference for details.

Material 3 date picker showing a selected date in a calendar grid

Installation

Terminal

- npx expo install @expo/ui

- yarn expo install @expo/ui

- pnpm expo install @expo/ui

- bun 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={{ vertical: true }} style={{ width: '100%' }}>
      <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={{ vertical: true }} style={{ width: '100%' }}>
      <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={{ vertical: true }} style={{ width: '100%' }}>
      <DateTimePicker
        onDateSelected={date => {
          setSelectedDate(date);
        }}
        displayedComponents="date"
        initialDate={selectedDate.toISOString()}
        variant="input"
      />
    </Host>
  );
}

API

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

No API data file found, sorry!