ReactNative에서 날짜 및 시간 선택기를 표시하는 방법은 무엇입니까?

앱에 날짜 및 시간 선택기를 표시하려면 아래와 같이 패키지를 설치해야 합니다. -

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

설치가 완료되면 이제 Datepicker를 먼저 표시하는 방법을 진행하겠습니다.

예:ReactNative의 DateTimePicker

아래와 같이 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}
/>

이제 Date Picker를 표시하는 완전한 코드 -

예시

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

시간 선택기 버튼을 클릭합니다. 시간 선택기를 보려면