DatePicker

一个用于选择日期和时间的 SwiftUI DatePicker 组件。

iOS

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~57.0.0

Expo UI DatePicker 与官方 SwiftUI DatePicker API 保持一致，并支持通过 datePickerStyle 修饰符进行样式设置。

安装

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.

日期选择器

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="选择日期"
        selection={selectedDate}
        displayedComponents={['date']}
        onDateChange={date => {
          setSelectedDate(date);
        }}
      />
    </Host>
  );
}

时间选择器

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="选择一个时间"
        selection={selectedDate}
        displayedComponents={['hourAndMinute']}
        onDateChange={date => {
          setSelectedDate(date);
        }}
      />
    </Host>
  );
}

日期和时间选择器

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="选择日期和时间"
        selection={selectedDate}
        displayedComponents={['date', 'hourAndMinute']}
        onDateChange={date => {
          setSelectedDate(date);
        }}
      />
    </Host>
  );
}

带日期范围

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="选择日期"
        selection={selectedDate}
        displayedComponents={['date']}
        range={{
          start: new Date(2024, 0, 1),
          end: new Date(2024, 11, 31),
        }}
        onDateChange={date => {
          setSelectedDate(date);
        }}
      />
    </Host>
  );
}

使用修饰符进行样式设置

你可以使用 datePickerStyle 修饰符来更改选择器的外观。可用样式有：automatic、compact、graphical 和 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="选择日期"
        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="选择日期"
        selection={selectedDate}
        displayedComponents={['date']}
        onDateChange={date => {
          setSelectedDate(date);
        }}
      />
    </Host>
  );
}

禁用的选择器

你可以使用 disabled 修饰符将选择器设置为不可交互。

DisabledDatePickerExample.tsx

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 matchContents>
      <DatePicker
        title="选择日期"
        selection={selectedDate}
        displayedComponents={['date']}
        onDateChange={date => {
          setSelectedDate(date);
        }}
        modifiers={[disabled()]}
      />
    </Host>
  );
}

自定义区域设置

使用带有 locale 键的 environment 修饰符，以在特定区域设置下显示选择器。

LocaleDatePickerExample.tsx

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 matchContents>
      <DatePicker
        title="选择日期"
        selection={selectedDate}
        displayedComponents={['date']}
        onDateChange={date => {
          setSelectedDate(date);
        }}
        modifiers={[environment('locale', 'fr_FR')]}
      />
    </Host>
  );
}

自定义时区

使用带有 timeZone 键的 environment 修饰符，以在特定的 IANA 时区中显示选择器。

TimeZoneDatePickerExample.tsx

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 matchContents>
      <DatePicker
        title="东京时间"
        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`	-