จะแสดงตัวเลือกวันที่และเวลาใน ReactNative ได้อย่างไร

ในการแสดงตัวเลือกวันที่และเวลาในแอปของคุณ คุณต้องติดตั้งแพ็คเกจดังที่แสดงด้านล่าง -

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

เมื่อคุณติดตั้งเสร็จแล้ว ให้เราดำเนินการแสดง Datepicker ก่อน

ตัวอย่าง:DateTimePicker ใน ReactNative

นำเข้าองค์ประกอบ datetimepicker ก่อนดังที่แสดงด้านล่าง -

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

องค์ประกอบ DateTimePicker พื้นฐานมีลักษณะดังนี้ -

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

นี่คือคุณสมบัติที่สำคัญบางประการของ DateTimePicker

เราจะใช้ประโยชน์จากวันที่ปัจจุบันใน 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"
   },
});

คลิกที่ปุ่ม Your TIME PICKER เพื่อดูตัวเลือกเวลา