React-datepicker로 달력 만들기

개요

react-datepicker를 이용해 아래와 같은 페이지를 만들어 본다.

• 별도의 클릭 없이 처음부터 달력이 나오는 페이지 (inline 스타일)
• 날짜 레이블을 누르면 달력이 나오는 페이지

결과물

• 만드는 김에 하나는 한국어로, 하나는 영어(default)로 만들어봤다. 지역 설정만 해 주면 되니까 쉽지만 날짜 정보 스타일이 지역마다 달라지는 것에는 유의해야 한다.
• 주말 날짜에 색을, 오늘 날짜에는 배경에 보라색 동그라미를 입히고 특정 날짜들은 회색 동그라미가 뜨게 커스텀했다.

ver 1. Inline 스타일

ver 2. 날짜 레이블을 누르면 달력이 뜨는 스타일

참고

• 공식 사이트: https://reactdatepicker.com/
• 공식 사이트에 달력을 다양하게 커스텀할 수 있도록 많은 예제가 나와있음! (달력 2개 띄우기, 시간 추가 등)

import

• 별도의 css 커스텀을 할 예정이라도 기본 css는 import해줘야 함

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
// 지역 설정이 필요한 경우 import
//import ko from 'date-fns/locale/ko'; 

---

1. Inline 달력

Datepicker 코드

• 공식문서와 큰 차이는 없다.
• 대신 나는 highlight된 날짜와 아닌 날짜에 대한 css 처리를 다르게 해 줘야 했기 때문에 useRef를 추가로 사용했다.
• highlightDates에 대한 정보를 백엔드에서 불러오면 그 정보를 DatePicker의 highlightDates 속성에 넣어줘서 일기가 있는 페이지의 날짜는 회색 동그라미가 그려지게 했다.
  (아래 코드에 들어간 날짜 배열은 프론트 only 환경 테스트용)

const [startDate, setStartDate] = useState(new window.Date()); //default: 오늘 날짜
const calRef = useRef(); //DOM 접근용. 꼭 필요하지 않음
...

return(
	<DatePicker 
          onChange={(date)=>onDatePickHandler(date)}
          selected={startDate}
          //locale={ko} //지역 설정
          highlightDates={[new Date('2023-02-12'), new Date('2023-02-11') ]} 
          ref={calRef}
          inline       
 	/> 
);  

날짜 클릭시의 핸들러

• 앞에서 언급했듯 highlight된 날짜와 아닌 날짜에 대한 처리를 다르게 하기 위한 처리가 들어가 있다.
• 지금 생각해보니 굳이 useRef를 쓰지 말고 백엔드에서 받은 정보를 토대로 처리하는 게 좀 더 깔끔할 것 같다.
• 아무튼 DatePicker를 사용할 때 직접 DOM에 접근해서 정보를 가져오고 싶다면 useRef를 사용해 아래와 같이 불러오면 된다.

const onDatePickHandler = (date) => {
    setStartDate(date);
    const highlightDates = calRef.current.state.highlightDates; 
    //DOM에서 highlightDates에 대한 정보를 직접 가져온다.
   
    //highlightDates에 선택한 날짜가 있는지 검색
    if(highlightDates.has(dateToStringForSearch(date))===true){ 
      //선택한 날짜가 highlighted인 경우
    }else{
      //선택한 날짜가 일반 날짜인 경우
    }
  

• 위의 코드에서 사용했던 함수로, 달력에서 선택한 날짜가 highlighted인 상태인지 알아보기 위해 선택한 날짜(Date 객체 형식)를 highlighted에 저장되는 형식으로 변환한다.
• 참고로 달력 지역 설정을 한국으로 하면 연도.월.일 스타일로 들어가니까 return 부분을 수정해줘야 한다.

//검색용: highlighted인 날짜를 찾기 위해 date 객체를 highlighted에 저장되는 날짜 형식인 
//(월.일.연도)로 변환
  const dateToStringForSearch = (d) => {
    const year = d.getFullYear();
    const month = d.getMonth() + 1;
    const date = d.getDate();
    return `${month >= 10 ? month : "0" + month}.${date >= 10 ? date : "0"+date}.${year}`;
  };

css

• 직접 개발자 도구에서 이름 뒤져가면서 커스텀하면 된다.
• 전체 코드를 첨부할까 하다가 내 css 코드는 달력을 감싸는 레이아웃이 없으면 바로 깨지는 것을 보고 그냥 자주 쓸만한 일부 클래스 이름들만 적어두기로 했다.

/* 전체 레이아웃. 그림자 효과같은 것을 주면 좋다 */
.react-datepicker {
    /* box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25); */
}

.react-datepicker__month-container {

}

.react-datepicker__header{
 
}

/* 최상단에 뜨는 연도와 월 */
.react-datepicker__current-month{
}

/* 요일들 */
.react-datepicker__day-name{
}

/* 날짜들을 담는 레이아웃 */
.react-datepicker__month{

}

/* day: 주말 날짜 */
.react-datepicker__day:nth-child(1){ 
    color:red; /* 일요일 날짜*/
}
.react-datepicker__day:nth-child(7){
    color:#8685FF; /* 토요일 날짜 */
}

/* day-name: 요일 */
.react-datepicker__day-name:nth-child(1){
    color: #FF5555; /* 일요일 */
}
.react-datepicker__day-name:nth-child(7){
    color:#8685FF; /* 토요일 */
}

/* 일반 날짜 */
.react-datepicker__day{
}

/* 선택된 날짜 */
.react-datepicker__day--selected{

}


/* highlighted된 날짜 */
.react-datepicker__day--highlighted{

} 

/* 날짜에 마우스를 올릴 때 */
.react-datepicker__day:hover {

}

---

2. Label 스타일

• 달력 스타일은 위와 공유하므로 그냥 label 들어가는 스타일대로 작성해주면 된다. label만 styled component로 커스텀해줬다.
• 레이블에 날짜만 들어가면 허전해서 달력 이모티콘을 dateFormat 마지막에 직접 넣어줬다.

const DateInput = styled(DatePicker)`
  margin-bottom: 10px;
  border: none;
  font-size: 15px;
  color: #aeaeae;

  &:focus {
    outline: 0;
  }
`;

<DateInput
     showIcon
     selected={startDate}
     onChange={(date) => setStartDate(date)}
     dateFormat="yyyy/MM/dd &#128198;"
     //locale={ko}
/>