custom react-DatePicker with styled-component

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

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

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

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

먼저 DatePicker를 설치해 줍니다.

bash

1npm install react-datepicker

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

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33import 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;
  }
`;

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

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

custom react-DatePicker with styled-component

기술 정리의 다른 글