資料結構
網路
關係型資料庫管理系統
作業系統
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+ 次瀏覽
廣告