React Native에서 날짜·시간 선택기(DateTimePicker) 표시하는 방법

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

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

설치가 완료되면 이제 날짜 선택기(Date Picker)를 화면에 표시하는 방법부터 살펴보겠습니다.

예제: 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의 주요 Props

Props	설명
mode	선택기의 유형을 지정합니다. 사용 가능한 옵션은 date(날짜), time(시간), datetime(날짜+시간), countdown(카운트다운)입니다. 이 중 datetime과 countdown은 iOS에서만 지원됩니다.
display	선택기의 표시 스타일을 결정합니다. Android에서는 default, spinner, calendar, clock 값을 사용할 수 있으며, iOS에서는 default, spinner, compact, inline 값을 사용할 수 있습니다.
value	DateTimePicker에 표시할 날짜 또는 시간 값입니다.
onChange	사용자가 날짜나 시간을 변경했을 때 호출되는 이벤트 핸들러입니다.
maximumDate	날짜 선택기에서 선택 가능한 최대 날짜를 설정합니다.
minimumDate	날짜 선택기에서 선택 가능한 최소 날짜를 설정합니다.

이번 예제에서는 현재 날짜를 기본값으로 사용하고, 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"
   },
});

실행 결과

React Native에서 날짜·시간 선택기(DateTimePicker) 표시하는 방법

화면에서 Show Date Picker 버튼을 클릭하면 날짜 선택기가 나타납니다.

시간 선택기(Time Picker) 구현하기

이어서 시간 선택기를 구현해 보겠습니다. 방법은 아주 간단합니다. 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"
   },
});

React Native에서 날짜·시간 선택기(DateTimePicker) 표시하는 방법

YOUR TIME PICKER 버튼을 클릭하면 시간 선택기가 화면에 표시됩니다.