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

DatePicker

A SwiftUI DatePicker component for selecting dates and times.

iOS

GitHub

npm

Changelog

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

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 picker

DatePickerExample.tsx

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

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

  return (
    <Host matchContents>
      <DatePicker
        title="Select a date"
        selection={selectedDate}
        displayedComponents={['date']}
        onDateChange={date => {
          setSelectedDate(date);
        }}
      />
    </Host>
  );
}

Time picker

TimePickerExample.tsx

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

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

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

Date and time picker

DateTimePickerExample.tsx

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

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

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

With date range

DateRangePickerExample.tsx

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

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

  return (
    <Host matchContents>
      <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.

WheelDatePickerExample.tsx

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 matchContents>
      <DatePicker
        modifiers={[datePickerStyle('wheel')]}
        title="Select a date"
        selection={selectedDate}
        displayedComponents={['date']}
        onDateChange={date => {
          setSelectedDate(date);
        }}
      />
    </Host>
  );
}

GraphicalDatePickerExample.tsx

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 matchContents>
      <DatePicker
        modifiers={[datePickerStyle('graphical')]}
        title="Select a date"
        selection={selectedDate}
        displayedComponents={['date']}
        onDateChange={date => {
          setSelectedDate(date);
        }}
      />
    </Host>
  );
}

Disabled picker

DisabledDatePickerExample.tsx

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

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

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

Custom locale

Use the locale prop to display the picker in a specific locale.

LocaleDatePickerExample.tsx

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

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

  return (
    <Host matchContents>
      <DatePicker
        title="Sélectionner la date"
        selection={selectedDate}
        displayedComponents={['date']}
        onDateChange={date => {
          setSelectedDate(date);
        }}
        locale="fr_FR"
      />
    </Host>
  );
}

Custom time zone

Use the timeZone prop to display the picker in a specific IANA time zone.

TimeZoneDatePickerExample.tsx

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

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

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

Custom locale

Use the locale prop to display the picker in a specific locale.

LocaleDatePickerExample.tsx

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

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

  return (
    <Host matchContents>
      <DatePicker
        title="Sélectionner la date"
        selection={selectedDate}
        displayedComponents={['date']}
        onDateChange={date => {
          setSelectedDate(date);
        }}
        locale="fr_FR"
      />
    </Host>
  );
}

Custom time zone

Use the timeZone prop to display the picker in a specific IANA time zone.

TimeZoneDatePickerExample.tsx

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

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

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

API

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

Component

`DatePicker`

iOS

Type: React.Element<DatePickerProps>

Renders a SwiftUI DatePicker component.

DatePickerProps

`children`

iOS

Optional • Type: React.ReactNode

Children to use as a custom label.

`displayedComponents`

iOS

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

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

`onDateChange`

iOS

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

Callback when the date selection changes.

`range`

iOS

Optional • Type: DateRange

The selectable date range.

`selection`

iOS

Optional • Type: Date

The currently selected date.

`title`

iOS

Optional • Type: string

A title/label displayed on the picker.

Inherited Props

CommonViewModifierProps

Types

`DatePickerComponent`

iOS

Literal Type: string

Acceptable values are: 'date' | 'hourAndMinute'

`DateRange`

iOS

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