如何在 React Native 中显示日期和时间选择器？

要在您的应用中显示日期和时间选择器，您需要安装如下所示的包：

npm install @react-native-community/datetimepicker --save

安装完成后，我们现在继续学习如何首先显示日期选择器。

示例：React Native 中的 DateTimePicker

首先导入 datetimepicker 组件，如下所示：

import DateTimePicker from '@react-native-community/datetimepicker';

一个基本的 DateTimePicker 组件如下所示：

<DateTimePicker testID="dateTimePicker" value={mydate} mode={displaymode}
is24Hour={true} display="default" onChange={onChangeFunc} />

以下是 DateTimePicker 的一些重要属性。

属性描述
mode定义您想要的拾取器类型。选项包括 date、time、datetime 和 countdown。
在以上选项中，datetime 和 countdown 仅在 iOS 上可用。
displayAndroid 的值为 default、spinner、calendar 和 clock。对于 iOS，值为 default、spinner、compact 和 inline。
value要在 DateTimePicker 中使用的日期或时间。
onChange用户更改日期或时间时调用的事件。
maximumDate要设置在日期选择器上的最大日期。
minimumDate要设置在日期选择器上的最小日期。

我们将在 DateTimePicker 中使用当前日期。mode 设置为 date，如下所示：

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"
   },
});

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

输出

点击**“显示日期选择器”**按钮查看选择器。

我们现在来看看时间选择器。

我们只需要将 mode 显示为 time，如下面的示例所示：

示例

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"
   },
});

点击**“您的时间选择器”**按钮查看时间选择器。

更新于：2021-07-01

9K+ 次浏览

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告