如何在 ReactNative 中显示日期和时间选择器?
react nativejavascriptmobile development
要在您的应用中显示日期和时间选择器,您必须安装一个包,如下所示 −
npm install @react-native-community/datetimepicker --save
安装完成后,让我们先了解如何显示 Datepicker。
示例:ReactNative 中的 DateTimePicker
首先导入 datetimepicker 组件,如下所示 −
从 '@react-native-community/datetimepicker'; 导入 DateTimePicker
基本的 DateTimePicker 组件如下所示 −
<DateTimePicker testID="dateTimePicker" value={mydate} mode={displaymode} is24Hour={true} display="default" onChange={onChangeFunc} />
以下是 DateTimePicker 的一些重要属性。
Props | Description |
---|---|
mode | 定义所需的选择器类型。选项包括日期、时间、日期时间和倒计时。 以上选项中的日期时间和倒计时仅适用于 iOS。 |
显示 | Android 的值包括默认、微调器、日历和时钟。对于 iOS,这些值为 default、spinner、compact 和 inline。 |
value | DateTimePicker 中要使用的日期或时间。 |
onChange | 用户更改日期或时间时调用的事件。 |
maximumDate | 日期选择器上要设置的最大日期。 |
minimumDate | 日期选择器上要设置的最小日期。 |
我们将在 DateTimePicker 中使用当前日期。模式设置为日期如下 −
const [mydate, setDate] = useState(new Date()); const [displaymode, setMode] = useState('date');
这是 DateTimePicker 组件 −
<DateTimePicker value={mydate} mode={displaymode} is24Hour={true} display="default" onChange={changeSelectedDate} />
现在显示日期选择器的完整代码 −
示例
import React, {useState} from 'react'; import {View, Button, Platform, SafeAreaView , StyleSheet} from 'react-native'; import DateTimePicker from '@react-native-community/datetimepicker'; export default function App() { const [mydate, setDate] = useState(new Date()); const [displaymode, setMode] = useState('date'); const [isDisplayDate, setShow] = useState(false); const changeSelectedDate = (event, selectedDate) => { const currentDate = selectedDate || mydate; setDate(currentDate); }; const showMode = (currentMode) => { setShow(true); setMode(currentMode); }; const displayDatepicker = () => { showMode('date'); }; return ( <SafeAreaView style={styles.container}> <View> <Button onPress={displayDatepicker} title="Show date picker!" /> </View> {isDisplayDate && ( <DateTimePicker testID="dateTimePicker" value={mydate} mode={displaymode} is24Hour={true} display="default" onChange={changeSelectedDate} /> )} </SafeAreaView> ); }; const styles = StyleSheet.create({ container: { flex: 1, alignItems: "center", justifyContent: "center" }, });
输出
点击显示日期选择器按钮查看选择器。
现在让我们看看时间选择器。
我们只需将模式显示为时间,如下例所示 −
示例
import React, {useState} from 'react'; import {View, Button, Platform, SafeAreaView , StyleSheet} from 'reactnative'; import DateTimePicker from '@react-native-community/datetimepicker'; export default function App() { const [mydate, setDate] = useState(new Date()); const [displaymode, setMode] = useState('time'); const [isDisplayDate, setShow] = useState(false); const changeSelectedDate = (event, selectedDate) => { const currentDate = selectedDate || mydate; setDate(currentDate); }; const showMode = (currentMode) => { setShow(true); setMode(currentMode); }; const displayTimepicker = () => { showMode('time'); }; return ( <SafeAreaView style={styles.container}> <View> <Button onPress={displayTimepicker} title="Your Time Picker" /> </View> {isDisplayDate && ( <DateTimePicker value={mydate} mode={displaymode} is24Hour={true} display="default" onChange={changeSelectedDate} /> )} </SafeAreaView> ); }; const styles = StyleSheet.create({ container: { flex: 1, alignItems: "center", justifyContent: "center" }, });
点击您的时间选择器按钮查看时间选择器。