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

DateTimePicker

GitHub

Changelog

npm

A SwiftUI DateTimePicker component for selecting dates and times.

iOS

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

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, Host } from '@expo/ui/swift-ui';

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

See Official SwiftUI documentation for more information.

Time picker

import { DateTimePicker, Host } from '@expo/ui/swift-ui';

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

See [Official SwiftUI documentation](https://developer.apple.com/documentation/swiftui/datepicker for more information.

API

Component

`DateTimePicker`

iOS

Type: React.Element<DateTimePickerProps>

Renders a DateTimePicker component.

DateTimePickerProps

`color`

iOS

Optional • Type: ColorValue

The tint color to use on the picker elements.

`displayedComponents`

iOS

Optional • Type: DisplayedComponents • Default: 'date'

The components that the picker should display. On iOS, you can have a picker that selects both date and time.

`initialDate`

iOS

Optional • Literal type: union

The initial date to display on the picker.

Acceptable values are: string | null

`onDateSelected`

iOS

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

Callback function that is called when a date is selected.

`title`

iOS

Optional • Type: string

A title displayed on the picker on iOS.

`variant`

iOS

Optional • Type: IOSVariant • Default: 'automatic'

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

Inherited Props

CommonViewModifierProps

Types

`DisplayedComponents`

iOS

Literal Type: string

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

`IOSVariant`

iOS

Literal Type: string

Acceptable values are: 'wheel' | 'automatic' | 'graphical' | 'compact'