react-day-picker custom

react-day-picker 설치

yarn add react-day-picker date-fns

range를 선택할 수 있는 daypicker를 이용하기 위해
https://react-day-picker.js.org/basics/selecting-days

이것을 사용하였다.

커스텀을 위해 node_modules에 있는 style.css 파일을 만져봤으나 적용이 되지 않아서, react-calendar를 사용할때처럼 style.ts파일을 만들고, emotion을 적용한 파일을 import 하였다.

style.ts

import styled from "@emotion/styled";
import {
  DayPicker,
} from 'react-day-picker';

export const ReactDayPick = styled(DayPicker)`
	:root{}

	...
`

ReactDayPick이 container에서 적용되는 라이브러리 전체부분이다.

:root 적용안될때

:root {
  --rdp-cell-size: 65px;
  --rdp-accent-color: #333333;
  --rdp-background-color: #e7edff;
  /* Switch to dark colors for dark themes */
  --rdp-accent-color-dark: #3003e1;
  --rdp-background-color-dark: #180270;
  /* Outline border for focused elements */
  --rdp-outline: 2px solid var(--rdp-accent-color);
  /* Outline border for focused and selected elements */
  --rdp-outline-selected: 2px solid #DBDBDB;
}

다른 부분의 style은 적용이 되지만,
이부분은 안되어서 포기하려고 했는데.....

:root를 전역에 스타일을 줄때처럼 *로 바꾸니 된다....??

* {
  --rdp-cell-size: 65px;
  --rdp-accent-color: #333333;
  --rdp-background-color: #e7edff;
  /* Switch to dark colors for dark themes */
  --rdp-accent-color-dark: #3003e1;
  --rdp-background-color-dark: #180270;
  /* Outline border for focused elements */
  --rdp-outline: 2px solid var(--rdp-accent-color);
  /* Outline border for focused and selected elements */
  --rdp-outline-selected: 2px solid #DBDBDB;
}

그리고
피그마대로 UI를 만들고,

시작일 입력창부분을 클릭하면 달력이 나오고 기간을 선택하여 값을 받아오고 싶었는데, 달력부분과 input 부분이 덩어리였다..

그러면 나눠야되는데,
달력안에 footer...?

달력과 인풋창 나누는 방법

footer부분을 시작일과 종료일로 나누기
(두 부분을 굳이 나눌 필요없다면, footer 하나로 빼도 됨)

  const start = (
        <form className="ma2">
          <StartDay>
            <Input
              size={29}
              value={fromValue}
              onChange={handleFromChange}
              className="input-reset pa2 ma bg-white black ba"
            />
          <FromTo></FromTo>
          </StartDay>
          </form>
          )

const end = (
  <form className="ma2">
          <Input
            size={29}
            value={toValue}
            onChange={handleToChange}
            className="input-reset pa2 bg-white black ba"
          />
        </form>
  )

return 부분
{start}와 {end}부분이 입력창

return (
  <div>
    <StartEndDate>
      <span onClick={onClickOpen}>{start}</span>
      <span>{end}</span>
    </StartEndDate>
  {isOpen && 
    <Picker>
      <ReactDayPick
        showOutsideDays={true}
        mode="range"
        selected={selectedRange}
        onSelect={handleRangeSelect}
      />
  </Picker>
}

이렇게하면 분리가 되어 기능(시작일을 누르면 달력이 나오게)을 넣을 수 있게 되었다.

달력 on/off

const [isOpen, setIsOpen] = useState(false)

const onClickOpen = () => {
    if(isOpen){
      setIsOpen(false)
    } else{
      setIsOpen(true)
    }
  }

return의 시작일 부분에 onClick을 넣어주고 달력이 표시 되는 부분에 조건부 렌더링을 주었더니 잘된다.

개발자도구로 요소의 이름을 보면서 스타일링한 결과

쓸만한 것이되었다!