---
modificationDate: May 06, 2026
title: DateTimePicker
description: A date and time picker compatible with @react-native-community/datetimepicker.
sourceCodeUrl: 'https://github.com/expo/expo/tree/sdk-56/packages/expo-ui'
packageName: '@expo/ui'
platforms: ['android', 'ios', 'expo-go']
---

<AgentInstructions>

## Submitting Feedback

If this page contains errors, outdated information, or gaps that blocked you from completing a task, report it so the docs can be improved:

curl -X POST https://api.expo.dev/v2/feedback/docs-send -H 'Content-Type: application/json' -d '{"url":"/versions/v56.0.0/sdk/ui/drop-in-replacements/datetimepicker/","feedback":"🤖 Agent feedback: <specific, actionable description>"}'

Only submit when you have something specific and actionable to report.

</AgentInstructions>

# DateTimePicker

A date and time picker compatible with @react-native-community/datetimepicker.
Android, iOS, Included in Expo Go

> For the complete documentation index, see [llms.txt](/llms.txt). Use this file to discover all available pages.

A `DateTimePicker` component with an API compatible with `@react-native-community/datetimepicker`. It uses Jetpack Compose on Android and SwiftUI on iOS, providing a modern Material 3 and SwiftUI appearance by default (the community module defaults to the older look on Android).

`DateTimePicker` component is fully declarative. Use the `presentation` prop to render the picker `'inline'` directly in the view hierarchy or as a `'dialog'` on Android. There is no Android imperative API (`DateTimePickerAndroid.open()`).

Under the hood this component wraps the platform-specific `@expo/ui` primitives:

-   **Android**: [Jetpack Compose DateTimePicker](/versions/v56.0.0/sdk/ui/jetpack-compose/datetimepicker#datetimepicker) (inline), [DatePickerDialog/TimePickerDialog](/versions/v56.0.0/sdk/ui/jetpack-compose/datetimepicker#datepickerdialog) (dialog)
-   **iOS**: [SwiftUI DatePicker](/versions/v56.0.0/sdk/ui/swift-ui/datepicker)

If you need lower-level control (custom modifiers, styles, or layouts), use those primitives directly.

## Installation

```sh
npx expo install @expo/ui
```

If you are installing this in an [existing React Native app](/bare/overview), make sure to [install `expo`](/bare/installing-expo-modules) in your project.

## Migrating from `@react-native-community/datetimepicker`

-   Update the import from `import DateTimePicker from '@react-native-community/datetimepicker'` to `import DateTimePicker from '@expo/ui/community/datetime-picker'`.
-   There is no imperative `DateTimePickerAndroid.open()` API. Render the component and use `presentation="dialog"` instead.
-   `minuteInterval`, `textColor`, `firstDayOfWeek`, `neutralButton`, `onNeutralButtonPress`, `fullscreen`, `title` and `startOnYearSelection` props are not supported.
-   Use `timeZoneName` (IANA name) instead of `timeZoneOffsetInMinutes`.
-   The `countdown` mode is not supported.
-   `onError` prop is not needed.

## Basic usage

```tsx
import { useState } from 'react';
import DateTimePicker from '@expo/ui/community/datetime-picker';

export default function DateTimePickerExample() {
  const [date, setDate] = useState(new Date());

  return (
    <DateTimePicker
      value={date}
      onValueChange={(event, selectedDate) => {
        setDate(selectedDate);
      }}
      mode="date"
    />
  );
}
```

## Time picker

```tsx
import { useState } from 'react';
import DateTimePicker from '@expo/ui/community/datetime-picker';

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

  return (
    <DateTimePicker
      value={date}
      onValueChange={(event, selectedDate) => {
        setDate(selectedDate);
      }}
      mode="time"
    />
  );
}
```

## With date constraints

```tsx
import { useState } from 'react';
import DateTimePicker from '@expo/ui/community/datetime-picker';

const today = new Date();
const thirtyDaysFromNow = new Date(today.getTime() + 30 * 24 * 60 * 60 * 1000);

export default function ConstrainedDatePickerExample() {
  const [date, setDate] = useState(new Date());

  return (
    <DateTimePicker
      value={date}
      onValueChange={(event, selectedDate) => {
        setDate(selectedDate);
      }}
      mode="date"
      minimumDate={today}
      maximumDate={thirtyDaysFromNow}
    />
  );
}
```

## Dialog presentation

On Android, you can use `presentation="dialog"` to show the picker as a modal dialog. The dialog opens when the component mounts. Unmount it in response to `onValueChange` or `onDismiss`. On iOS, this prop is ignored and the picker always renders inline.

```tsx
import { useState } from 'react';
import { Button, View } from 'react-native';
import DateTimePicker from '@expo/ui/community/datetime-picker';

export default function AndroidDialogExample() {
  const [date, setDate] = useState(new Date());
  const [show, setShow] = useState(false);

  return (
    <View>
      <Button title="Pick a date" onPress={() => setShow(true)} />
      {show && (
        <DateTimePicker
          value={date}
          onValueChange={(event, selectedDate) => {
            setShow(false);
            setDate(selectedDate);
          }}
          onDismiss={() => {
            setShow(false);
          }}
          mode="date"
          presentation="dialog"
        />
      )}
    </View>
  );
}
```

## API

```tsx
import DateTimePicker from '@expo/ui/community/datetime-picker';
```

## Component

### `DateTimePicker`

Supported platforms: Android, iOS.

Type: React.[Element](https://www.typescriptlang.org/docs/handbook/jsx.html#function-component)<[DateTimePickerProps](#datetimepickerprops)\>

DateTimePickerProps

### `accentColor`

Supported platforms: Android, iOS.

Optional • Type: `string`

Accent/tint color applied to the picker. Maps to `color` on Android and `tint` on iOS.

### `disabled`

Supported platforms: iOS.

Optional • Type: `boolean`

Whether the picker is disabled.

### `display`

Supported platforms: Android, iOS.

Optional • Literal type: `string` • Default: `'default'`

Display style. Android supports `'default' | 'spinner'` — `'spinner'` shows a text input rather than a scroll wheel (Material 3 does not have a wheel-style picker). iOS supports `'default' | 'spinner' | 'compact' | 'inline'`.

Acceptable values are: `'default'` | `'spinner'` | `'compact'` | `'inline'` | `'calendar'` | `'clock'`

### `is24Hour`

Supported platforms: Android.

Optional • Type: `boolean`

Use 24-hour format.

### `locale`

Supported platforms: iOS.

Optional • Type: `string`

Locale identifier (e.g. 'en_US', 'fr_FR') for the picker display.

### `maximumDate`

Supported platforms: Android, iOS.

Optional • Type: [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)

The latest selectable date.

### `minimumDate`

Supported platforms: Android, iOS.

Optional • Type: [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)

The earliest selectable date.

### `mode`

Supported platforms: Android, iOS.

Optional • Literal type: `string` • Default: `'date'`

The picker mode.

Acceptable values are: `'date'` | `'time'` | `'datetime'`

### `negativeButton`

Supported platforms: Android.

Optional • Type: `{ label: string }`

Set the negative (cancel) button label.

> **Deprecated:** Use `onValueChange` and `onDismiss` instead.

### `onChange`

Supported platforms: Android, iOS.

Optional • Type: (event: [DateTimePickerEvent](#datetimepickerevent), date?: [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)) => void

Called when the user changes the date/time or dismisses the picker. The event type is encoded in `event.type`. If the new specific listeners are provided, they take precedence.

### `onDismiss`

Supported platforms: Android.

Optional • Type: `() => void`

Called when the picker is dismissed without selecting a value.

### `onValueChange`

Supported platforms: Android, iOS.

Optional • Type: (event: [DateTimePickerChangeEvent](#datetimepickerchangeevent), date: [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)) => void

Called when the user selects a date or time.

### `positiveButton`

Supported platforms: Android.

Optional • Type: `{ label: string }`

Set the positive (confirm) button label.

### `presentation`

Supported platforms: Android.

Optional • Literal type: `string` • Default: `'dialog'`

How the picker is presented.

-   `'inline'` renders the picker directly in the view hierarchy.
-   `'dialog'` shows a modal dialog that opens on mount. Fires `onValueChange` on confirmation, `onDismiss` on cancel. The caller should unmount the component in response.

On iOS this prop is accepted but ignored (always inline). On Android the default is `'dialog'`.

Acceptable values are: `'inline'` | `'dialog'`

### `testID`

Supported platforms: Android, iOS.

Optional • Type: `string`

A test ID forwarded to the native view. Note: on Android dialog presentation, the test ID is not forwarded.

### `themeVariant`

Supported platforms: iOS.

Optional • Literal type: `string`

Force a specific color scheme on the picker.

Acceptable values are: `'dark'` | `'light'`

### `timeZoneName`

Supported platforms: iOS.

Optional • Type: `string`

IANA time zone name (e.g. 'America/New_York') for the picker display.

### `value`

Supported platforms: Android, iOS.

Type: [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)

The current date value (controlled).

#### Inherited Props

-   [Pick](https://www.typescriptlang.org/docs/handbook/utility-types.html#picktype-keys)<[ViewProps](https://reactnative.dev/docs/view#props), 'style'\>

## Types

### `DateTimePickerChangeEvent`

Supported platforms: Android, iOS.

| Property | Type | Description |
| --- | --- | --- |
| nativeEvent | `{ timestamp: number, utcOffset: number }` | - |

> **Deprecated:** Used with the deprecated `onChange` prop.

### `DateTimePickerEvent`

Supported platforms: Android, iOS.

| Property | Type | Description |
| --- | --- | --- |
| nativeEvent | `{ timestamp: number, utcOffset: number }` | - |
| type | `'set' | 'dismissed'` | `'set'` when the user selects a date. `'dismissed'` when the user cancels an Android dialog picker. iOS never fires `'dismissed'`. |