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>
  );
}

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>
  );
}

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>
  );
}

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>
  );
}

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>
  );
}

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>
  );
}

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>
  );
}

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>
  );
}

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>
  );
}

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.

Modifiers for DatePicker

Modifiers for any view

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