custom react-DatePicker with styled-component

오늘은 실무에서 DatePicker를 사용할 일이 생겼다.

 

프로젝트가 babel로 구성된 프로젝트여서 mui datepicker는 사용하지 못하였기에 근본 DatePicker를 이용하였는데

문제는 DatePicker에 사이즈를 키우고 위치를 조정하고 싶은데 변경이 쉽지 않았다.

그래서 굉장히 고생 끝에 일일이 css를 수정하는 방법을 택하였다.

 

먼저 DatePicker를 설치해 줍니다.

npm install react-datepicker

 

이후 쉽게 말씀드리면 DatePicker를 클릭했을 때 팝업창이 DatePicker가 속한 부모요소 제일 끝 자식으로 들어가기 때문에 이 개념을 꼭 알고 css를 적용하면 쉽습니다.

 

import React, { useState } from "react";
import DatePicker from "react-datepicker";

import "react-datepicker/dist/react-datepicker.css";
import { styled } from "styled-components";

export default function DatePickerTest() {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DateParent>
      <DatePicker
        selected={startDate}
        onChange={(date: Date) => setStartDate(date)}
      />
    </DateParent>
  );
}

const DateParent = styled.div`
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  .react-datepicker-popper {
    transform: translate(345px, 490px) !important;
  }

  .react-datepicker__triangle {
    display: none;
  }
`;

 

Before

 

After

주의할 점은 부모요소 DOM에 position: relativer를 적용해야 위치를 조절할 수 있다.

또한 개발자 도구를 켜서 바꾸고 싶은 요소를 className을 찾고 수정해 주면 된다.