study: 리네다기 | 날짜 선택 모달

Lumpen·2023년 5월 29일
0

Study

목록 보기
91/92

datetimepicker 는 OS 별 특화된 날짜/시간 컴포넌트를 제공한다
react-native-modal-datetime-picker 는 날짜 및 시간 선택을 모달 형태로 제공하는
여기에 date-fns 를 함께 사용하면 편리하게 날짜 및 시간을 관리할 수 있다

native 코드를 사용하는 라이브러리를 설치하면 시뮬레이터를 다시 켜줘야 한다

import {format} from 'date-fns';
import {ko} from 'date-fns/locale';


<Text> 
  {format(new Date(), 'PPP', {
    locale: ko,
  })}
</Text>

<DateTimePickerModal
  onConfirm={onConfirm}
  onCancel={onCancel}
  mode={mode}
  date={date}
  isVisible={visible}
/>

• onConfirm: 날짜를 선택했을 때 호출되는 함수, 파라미터는 Date 객체
• onCancel: 날짜 선택을 취소했을 때 호출되는 함수
• mode: 모달의 모드를 설정, 설정할 수 있는 값은 date, time, datetime
• date: 컴포넌트에서 보여졌을 때 초깃값으로 설정할 Date 객체 타입의 값
• isVisible: 이 값을 true로 설정하면 모달이 보이고, false로 설정하면 모달이 사라짐

profile
떠돌이 생활을 하는. 실업자는 아니지만, 부랑 생활을 하는

0개의 댓글