[React Native] 리액트 네이티브 달력 날짜 사용하기 - DateTimePickerModal

리액트 네이티브에서 달력 컴포넌트를 사용하여 날짜를 선택할 수 있는 기능을 구현하기 위해 DateTimePickerModal을 사용한 예제이다.

---

# 라이브러리 설치하기

npm install -save react-native-image-picker
npm install -save react-native-community/datetimepicker

 

# DateTimePickerModal 컴포넌트 사용하기

import {View, StyleSheet, Pressable} from 'react-native';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import {ko} from 'date-fns/locale';
import {format} from "date-fns";

<View>
    <Pressable onPress={showDatePicker}>
      <Text style={styles.date}>
        {format(new Date(date), 'PPP', {locale: ko})}
      </Text>
    </Pressable>
    <DateTimePickerModal
      isVisible={isDatePickerVisible}
      mode="date"
      onConfirm={handleConfirm}
      onCancel={hideDatePicker} 
    />
</View>

• isVisible : 모달의 노출 여부
• mode : date, time 등 모달의 모드 설정
• onConfirm : 날짜를 선택 했을 때, 호출될 함수 설정
• onCancel : 날짜 선택을 취소했을 때, 호출될 함수 설정

 

# 필요한 함수 정의

const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
const [date, onChangeDate] = useState(new Date());

const showDatePicker = () => {
    setDatePickerVisibility(true);
}
const hideDatePicker = () => {
    setDatePickerVisibility(false);
}

const handleConfirm = (date) => {
    onChangeDate(date);
    hideDatePicker();
    console.log("date : ", date);
}