React(70) react-date-range 캘린더 라이브러리 사용하기

 

유저가 캘린더에서 원하는 날짜를 선택하면 input 창에 자동으로 입력받는 기능을 구현해보려고 한다.

 

그래서 react-date-range 라는 캘린더 라이브러리를 사용하여 특정 날짜 값을 받는 기능을 구현하여 보았다.

 

 

** 설치 및 기본적인 셋업도 간단하다. (공식문서를 참고하세요)

react-date-range

 

 

---

React(70) react-date-range 캘린더 라이브러리 사용하기

구현에 필요한 3가지 라이브러리를 사용하였다. 얘네들 임포트해주자

• 캘린더 ui 를 위해 react-date-rang
• 한국어 기능을 위해 date-fns
• 날짜 포맷 변환을 위해 moment

 

import { Calendar } from 'react-date-range'; // 얘가 캘린더 라이브러리
import ko from 'date-fns/locale/ko';	     // 날짜 포맷 라이브러리 (한국어 기능을 임포트)
import moment from 'moment';		     // 날짜 포맷 라이브러리

 

  const [showCalendar, setShowCalendar] = useState<boolean>(false);   // 캘린더 여는 토글
  const tomorrow = moment().add(1, 'd').toDate(); 	// 내일 날짜 기본값지정을 위해 
  const [date, setDate] = useState<Date>(tomorrow); 	// date 를 선언하고 기본값을 내일날짜로 지정

  const onChangeDate = useCallback((date: Date): void | undefined => { // date 변경값을 받아오는 함수
      if (!date) {return;} // 날짜값이 없을 때 예외처리
      setDate(date); 	   // 날짜값이 들어오면 date 를 set해준다
  },[date]);

 

{showCalendar &&  // 클릭 등으로 토글상태 값이 true 이 되면 달력이 보여진다
  <Calendar
    locale={ko} 	// 한국어 달력
    months={1}  	// 1달치 달력만 디스플레이
    minDate={tomorrow}  // 최소날짜값 내일이면 내일부터 선택가능하다.
    date={date}		// 날짜값
    onChange={onChangeDate} 	     // onChange 함수
    dateDisplayFormat={'yyyy.mm.dd'} // 날짜 포맷값
  />
}

 

 

결과화면

캘린더 ui 가 잘 나오고 날짜를 선택하면 <input> 창에 잘 받아온다