数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 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 上可用。 |
| display | Android 的值为 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"
},
});输出
点击**“显示日期选择器”**按钮查看选择器。
我们现在来看看时间选择器。
我们只需要将 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+ 次浏览
广告