This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.
DateTimePicker
与 @react-native-community/datetimepicker 兼容的日期和时间选择器。
一个与 @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/community/datetime-picker'。 - 不存在命令式的
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/community/datetime-picker'; 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/community/datetime-picker'; 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/community/datetime-picker'; 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/community/datetime-picker'; export default function AndroidDialogExample() { const [date, setDate] = useState(new Date()); const [show, setShow] = useState(false); return ( <View> <Button title="选择日期" 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/community/datetime-picker';
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' | 'compact' | 'inline' | 'spinner' | 'calendar' | 'clock'
stringLocale identifier (e.g. 'en_US', 'fr_FR') for the picker display.
string • Default: 'date'The picker mode.
Acceptable values are: 'time' | 'date' | 'datetime'
{
label: string
}Set the negative (cancel) button label.
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.
{
label: string
}Set the positive (confirm) button label.
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: 'light' | 'dark'
stringIANA time zone name (e.g. 'America/New_York') for the picker display.
Types
| Property | Type | Description |
|---|---|---|
| nativeEvent | {
timestamp: number,
utcOffset: number
} | - |