DateTimePicker
兼容 @react-native-community/datetimepicker 的日期和时间选择器。
For the complete documentation index, see llms.txt. Use this Use this file to discover all available pages.
一个与 @react-native-community/datetimepicker API 兼容的 DateTimePicker 组件。它在 Android 上使用 Jetpack Compose，在 iOS 上使用 SwiftUI，默认提供现代的 Material 3 和 SwiftUI 外观（社区模块在 Android 上默认采用较旧的样式）。
DateTimePicker 组件是完全声明式的。使用 presentation 属性可以将选择器以 'inline' 的形式直接渲染在视图层级中，或在 Android 上以 'dialog' 的形式显示。没有 Android 的命令式 API（DateTimePickerAndroid.open()）。
在底层，该组件封装了平台特定的 @expo/ui 原语：
- Android: Jetpack Compose DateTimePicker（inline）、DatePickerDialog/TimePickerDialog（dialog）
- iOS: SwiftUI DatePicker
如果你需要更低层级的控制（自定义修饰符、样式或布局），请直接使用这些原语。
安装
- npx expo install @expo/uiIf you are installing this in an existing React Native app, make sure to install expo in your project.
从 @react-native-community/datetimepicker 迁移
- 将导入从
import DateTimePicker from '@react-native-community/datetimepicker'更新为import DateTimePicker from '@expo/ui/datetimepicker'。 - 没有命令式的
DateTimePickerAndroid.open()API。请渲染该组件并改用presentation="dialog"。 - 不支持
minuteInterval、textColor、firstDayOfWeek、neutralButton、onNeutralButtonPress、fullscreen、title和startOnYearSelection属性。 - 使用
timeZoneName（IANA 名称）代替timeZoneOffsetInMinutes。 - 不支持
countdown模式。 - 不需要
onError属性。
基本用法
import { useState } from 'react'; import DateTimePicker from '@expo/ui/datetimepicker'; export default function DateTimePickerExample() { const [date, setDate] = useState(new Date()); return ( <DateTimePicker value={date} onValueChange={(event, selectedDate) => { setDate(selectedDate); }} mode="date" /> ); }
时间选择器
import { useState } from 'react'; import DateTimePicker from '@expo/ui/datetimepicker'; export default function TimePickerExample() { const [date, setDate] = useState(new Date()); return ( <DateTimePicker value={date} onValueChange={(event, selectedDate) => { setDate(selectedDate); }} mode="time" /> ); }
带日期限制
import { useState } from 'react'; import DateTimePicker from '@expo/ui/datetimepicker'; const today = new Date(); const thirtyDaysFromNow = new Date(today.getTime() + 30 * 24 * 60 * 60 * 1000); export default function ConstrainedDatePickerExample() { const [date, setDate] = useState(new Date()); return ( <DateTimePicker value={date} onValueChange={(event, selectedDate) => { setDate(selectedDate); }} mode="date" minimumDate={today} maximumDate={thirtyDaysFromNow} /> ); }
对话框展示
在 Android 上，你可以使用 presentation="dialog" 将选择器作为模态对话框显示。对话框会在组件挂载时打开。请在响应 onValueChange 或 onDismiss 时卸载它。在 iOS 上，此属性会被忽略，选择器始终以内联方式渲染。
import { useState } from 'react'; import { Button, View } from 'react-native'; import DateTimePicker from '@expo/ui/datetimepicker'; export default function AndroidDialogExample() { const [date, setDate] = useState(new Date()); const [show, setShow] = useState(false); return ( <View> <Button title="Pick a date" onPress={() => setShow(true)} /> {show && ( <DateTimePicker value={date} onValueChange={(event, selectedDate) => { setShow(false); setDate(selectedDate); }} onDismiss={() => { setShow(false); }} mode="date" presentation="dialog" /> )} </View> ); }
API
import DateTimePicker from '@expo/ui/datetimepicker';
Component
Type: React.Element<DateTimePickerProps>
stringAccent/tint color applied to the picker.
Maps to color on Android and tint on iOS.
string • Default: 'default'Display style. Android supports 'default' | 'spinner' — 'spinner' shows a text input
rather than a scroll wheel (Material 3 does not have a wheel-style picker).
iOS supports 'default' | 'spinner' | 'compact' | 'inline'.
Acceptable values are: 'default' | 'spinner' | 'compact' | 'inline' | 'calendar' | 'clock'
string • Default: 'date'The picker mode.
Acceptable values are: 'date' | 'time' | 'datetime'
Deprecated: Use
onValueChangeandonDismissinstead.
(event: DateTimePickerEvent, date?: Date) => voidCalled when the user changes the date/time or dismisses the picker.
The event type is encoded in event.type.
If the new specific listeners are provided, they take precedence.
() => voidCalled when the picker is dismissed without selecting a value.
(event: DateTimePickerChangeEvent, date: Date) => voidCalled when the user selects a date or time.
string • Default: 'dialog'How the picker is presented.
'inline'renders the picker directly in the view hierarchy.'dialog'shows a modal dialog that opens on mount. FiresonValueChangeon confirmation,onDismisson cancel. The caller should unmount the component in response.
On iOS this prop is accepted but ignored (always inline).
On Android the default is 'dialog'.
Acceptable values are: 'inline' | 'dialog'
stringA test ID forwarded to the native view. Note: on Android dialog presentation, the test ID is not forwarded.
stringForce a specific color scheme on the picker.
Acceptable values are: 'dark' | 'light'
stringIANA time zone name (e.g. 'America/New_York') for the picker display.
Types
| Property | Type | Description |
|---|---|---|
| nativeEvent | {
timestamp: number,
utcOffset: number
} | - |
Deprecated: Used with the deprecated
onChangeprop.
| Property | Type | Description |
|---|---|---|
| nativeEvent | {
timestamp: number,
utcOffset: number
} | - |
| type | 'set' | 'dismissed' |
|