DatePicker

A SwiftUI DatePicker component for selecting dates and times. Also called DateTimePicker (Drop-in).

Expo UI DatePicker matches the official SwiftUI DatePicker API and supports styling via the datePickerStyle modifier.

Date picker

import { useState } from 'react';
import { Host, DatePicker } from '@expo/ui/swift-ui';

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

  // A date picker fills the width it is given, so `matchContents` collapses it.
  return (
    <Host style={{ flex: 1 }}>
      <DatePicker
        title="Select a date"
        selection={selectedDate}
        displayedComponents={['date']}
        onDateChange={date => {
          setSelectedDate(date);
        }}
      />
    </Host>
  );
}

A Select a date row with the current date in a compact button

Time picker

import { useState } from 'react';
import { Host, DatePicker } from '@expo/ui/swift-ui';

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

  return (
    <Host style={{ flex: 1 }}>
      <DatePicker
        title="Select a time"
        selection={selectedDate}
        displayedComponents={['hourAndMinute']}
        onDateChange={date => {
          setSelectedDate(date);
        }}
      />
    </Host>
  );
}

A Select a time row with the current time in a compact button

Date and time picker

import { useState } from 'react';
import { Host, DatePicker } from '@expo/ui/swift-ui';

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

  return (
    <Host style={{ flex: 1 }}>
      <DatePicker
        title="Select date and time"
        selection={selectedDate}
        displayedComponents={['date', 'hourAndMinute']}
        onDateChange={date => {
          setSelectedDate(date);
        }}
      />
    </Host>
  );
}

A Select date and time row with separate date and time buttons

With date range

import { useState } from 'react';
import { Host, DatePicker } from '@expo/ui/swift-ui';

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

  return (
    <Host style={{ flex: 1 }}>
      <DatePicker
        title="Select a date"
        selection={selectedDate}
        displayedComponents={['date']}
        range={{
          start: new Date(2024, 0, 1),
          end: new Date(2024, 11, 31),
        }}
        onDateChange={date => {
          setSelectedDate(date);
        }}
      />
    </Host>
  );
}

A Select a date row clamped to 31 Dec 2024, the end of the allowed range

Styling with modifiers

You can use the datePickerStyle modifier to change the appearance of the picker. Available styles are: automatic, compact, graphical, and wheel.

import { useState } from 'react';
import { Host, DatePicker } from '@expo/ui/swift-ui';
import { datePickerStyle } from '@expo/ui/swift-ui/modifiers';

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

  return (
    <Host style={{ flex: 1 }}>
      <DatePicker
        modifiers={[datePickerStyle('wheel')]}
        title="Select a date"
        selection={selectedDate}
        displayedComponents={['date']}
        onDateChange={date => {
          setSelectedDate(date);
        }}
      />
    </Host>
  );
}

A wheel style picker with day, month, and year columns

import { useState } from 'react';
import { Host, DatePicker } from '@expo/ui/swift-ui';
import { datePickerStyle } from '@expo/ui/swift-ui/modifiers';

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

  return (
    <Host style={{ flex: 1 }}>
      <DatePicker
        modifiers={[datePickerStyle('graphical')]}
        title="Select a date"
        selection={selectedDate}
        displayedComponents={['date']}
        onDateChange={date => {
          setSelectedDate(date);
        }}
      />
    </Host>
  );
}

A graphical style picker showing a month calendar with the current day selected

Disabled picker

You can make the picker non-interactive using the disabled modifier.

import { useState } from 'react';
import { Host, DatePicker } from '@expo/ui/swift-ui';
import { disabled } from '@expo/ui/swift-ui/modifiers';

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

  return (
    <Host style={{ flex: 1 }}>
      <DatePicker
        title="Select a date"
        selection={selectedDate}
        displayedComponents={['date']}
        onDateChange={date => {
          setSelectedDate(date);
        }}
        modifiers={[disabled()]}
      />
    </Host>
  );
}

A Select a date row with the date as plain text and no tappable button

Custom locale

Apply the environment modifier with the locale key to display the picker in a specific locale.

import { useState } from 'react';
import { Host, DatePicker } from '@expo/ui/swift-ui';
import { environment } from '@expo/ui/swift-ui/modifiers';

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

  return (
    <Host style={{ flex: 1 }}>
      <DatePicker
        title="Sélectionner la date"
        selection={selectedDate}
        displayedComponents={['date']}
        onDateChange={date => {
          setSelectedDate(date);
        }}
        modifiers={[environment('locale', 'fr_FR')]}
      />
    </Host>
  );
}

A picker labelled Sélectionner la date showing the date in French

Custom time zone

Apply the environment modifier with the timeZone key to display the picker in a specific IANA time zone.

import { useState } from 'react';
import { Host, DatePicker } from '@expo/ui/swift-ui';
import { environment } from '@expo/ui/swift-ui/modifiers';

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

  return (
    <Host style={{ flex: 1 }}>
      <DatePicker
        title="Tokyo time"
        selection={selectedDate}
        displayedComponents={['date', 'hourAndMinute']}
        onDateChange={date => {
          setSelectedDate(date);
        }}
        modifiers={[environment('timeZone', 'Asia/Tokyo')]}
      />
    </Host>
  );
}

A Tokyo time row showing the date and time in the Asia/Tokyo time zone

API

import { DatePicker } from '@expo/ui/swift-ui';

Component

`DatePicker`

Type: React.Element<DatePickerProps>

Renders a SwiftUI DatePicker component.

DatePickerProps

`children`

Optional • Type: ReactNode

Children to use as a custom label.

`displayedComponents`

Optional • Type: DatePickerComponent[] • Default: ['date']

The components to display: 'date' and/or 'hourAndMinute'.

`onDateChange`

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

Callback when the date selection changes.

`range`

Optional • Type: DateRange

The selectable date range.

`selection`

Optional • Type: Date

The currently selected date.

`title`

Optional • Type: string

A title/label displayed on the picker.

Inherited props

CommonViewModifierProps

Types

`DatePickerComponent`

Literal type: string

Acceptable values are: 'date' | 'hourAndMinute'

`DateRange`

Property	Type	Description
end(optional)	Date	-
start(optional)	Date	-

Modifiers

Use these modifiers in the modifiers prop of the SwiftUI version. The Drop-in version does not accept modifiers.

Expo UI lets you put any of the 89 modifiers for any view on DatePicker, but not all of them do something here.

70 change what you see on DatePicker.
6 have no visible effect on DatePicker.
13 work only in one place, such as a widget or a Grid.

Best modifiers for DatePicker

These modifiers are made for DatePicker, or they are the ones that you use most with it.

Also works on DatePicker

DatePicker takes these modifiers too, and each one works in the usual way.

No visible effect on DatePicker

DatePicker accepts these modifiers, but you see no change. They do not give an error.

Modifier	Why nothing happens
`accessibilityElement`	It joins the child views into one accessibility element, and DatePicker takes no child views.
`containerShape`	It sets the shape that the child views use for `containerRelativeShape`, and DatePicker takes no child views.
`geometryGroup` iOS 17+	It works on the child views that you give the component, and DatePicker takes none.
`imageScale`	It changes only SF Symbols, and DatePicker shows none.
`layoutPriority`	It has an effect only when the view shares an axis with other views in a stack.
`zIndex`	It changes the order of views that cover each other in the same parent, and DatePicker does not stack its children.

Only in some places

These modifiers work only in a widget, in a Grid, in a Namespace or in a parent that asks for them.

Modifier	Where it works
`activityBackgroundTint`	Works only in a Live Activity. It has no effect in the app.
`alignmentGuide`	Has an effect only when the parent, such as a `VStack` or `ZStack`, aligns its children by the same guide.
`containerBackground`	Works only in a widget, or in a navigation container when you use a `navigation` placement.
`glassEffectId`	Works only on a view that also has `glassEffect`, in a `GlassEffectContainer` and a `Namespace`.
`gridCellAnchor` iOS 16+	Works only on a cell of a `Grid`. `Grid` is in `@expo/ui/swift-ui`, but it has no Expo docs page.
`gridCellColumns`	Works only on a view in a `Grid.Row`. `Grid` is in `@expo/ui/swift-ui`, but it has no Expo docs page.
`gridCellUnsizedAxes`	Works only on a view in a `Grid`. `Grid` is in `@expo/ui/swift-ui`, but it has no Expo docs page.
`gridColumnAlignment` iOS 16+	Works only on a view in a `Grid.Row`. `Grid` is in `@expo/ui/swift-ui`, but it has no Expo docs page.
`invalidatableContent` iOS 17+	Has an effect only when a parent view uses `redacted` with the `invalidated` reason.
`matchedGeometryEffect`	Works only in a `Namespace`. Give two views the same `id` and change between them with an animation.
`privacySensitive`	Has an effect only when a parent view uses `redacted` with the `privacy` reason.
`unredacted`	Has an effect only in a parent view that uses `redacted`.
`widgetURL`	Works only in a widget. It has no effect in the app.

Sources

The original Expo docs for this page:

DatePicker (SwiftUI) (source-of-truth/versions/v57.0.0/sdk/ui/swift-ui/datepicker.md)
DatePicker (Drop-in) (source-of-truth/versions/v57.0.0/sdk/ui/drop-in-replacements/datetimepicker.md)

On this page