React datepicker 사용하기/css

react datepicker 사용하기

 

https://reactdatepicker.com/

React Datepicker crafted by HackerOne

 

package 설치

yarn add react-datepicker

import DatePicker from "react-datepicker"; // 데이트픽커 import
import "react-datepicker/dist/react-datepicker.css"; // 데이트픽커 기본 CSS
import { ko } from 'date-fns/esm/locale'; // 한국어 변환

export default function DatePickerTest() {
  const [startDate, setStartDate] = useState(new Date());
  const [endDate, setEndDate] = useState(null);

  return(
  	<>
    	<DatePicker local={ko} />
    </>
	)
};

위와 같이 import 해주면 DatePicker를 불러올 수 있다.

 

 

나같은 경우는 선택된 날짜의 범위로 달력을 만들려고 했다.

그러기 위해 몇 가지 설정을 더 해줬다.

 

export default function DatePickerTest(){
	const [startDate, setStartDate] = useState(new Date());
    const [endDate, setEndDate] = useState(null);

    const onChange = (dates) => {
        const [start, end] = dates;
        setStartDate(start);
        setEndDate(end);
      };

    return(
        <DatePicker
            elected={startDate}
            onChange={onChange}
            startDate={startDate}
            endDate={endDate}
            locale={ko}
            selectsRange
            inline
          />
    )
}

 

이런 식으로 설정해주면 아래와 같은 달력을 사용할 수 있다.

 

 

기본 세팅 코드는 맨 위에 링크된 사이트를 통해 확인할 수 있다.

 

datepicker에서는 custom header 같은 props옵션 등을 통해 css 스타일을 줄 수 있다고 하는데,

뭔가 스타일이 원하는대로 입히기 어려운 것 같아서 다른 방법을 알아봤더니

Styled component를 통해 css작업을 하는 것처럼 사용할 수 있다는 것을 찾았다.

 

const StyledDatePickerWrapper = styled.section`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 380px;
  border-radius: 20px;
  box-shadow: 0 0 5px 0 rgb(71, 181, 255);

  .react-datepicker {
    background-color: white;
    border-color: rgb(198, 232, 255);
    border-radius: 20px;
  }
  // 이런 식으로 css 작성 가능

 

위와 같이 브라우저 개발자도구의 Elements를 통해 class명을 알 수 있기 때문에,

스타일 코드가 조금 길어지더라도, custom header처럼 props를 계속 타고 내려가는 구조가 가독성이 별로라고 생각되면,

이와 같이 스타일을 작성해봐도 좋을 것 같다.