TIL DAY.38 [React] DatePicker 달력 라이브러리 활용법

오늘은 위와같은 기능을 구현하기 위해 사용한 Datepicker 사용법에 대해서 알아보도록 하겠다.

 const [date, setDate] = useState(
    new Date(
      new Date().getFullYear(),
      new Date().getMonth(),
      new Date().getDate() - 3
    )
  );
  
 const [endDate, setEndDate] = useState(new Date());
 
 const handleBtnClicked = (e) => {
    const today = new Date();
    const weeksAgo = new Date(
      today.getFullYear(),
      today.getMonth(),
      today.getDate() - 7
    );
    const threeDays = new Date(
      today.getFullYear(),
      today.getMonth(),
      today.getDate() - 3
    );
    const oneMonth = new Date(
      today.getFullYear(),
      today.getMonth() - 1,
      today.getDate()
    );
    const threeMonth = new Date(
      today.getFullYear(),
      today.getMonth() - 3,
      today.getDate()
    );
    setIsBtnClicked(e.target.value);
    if (e.target.value === "전체") {
      setDate();
      setEndDate();
    }
    if (e.target.value === "오늘") {
      setDate(today);
      setEndDate(today);
    }
    if (e.target.value === "1주일") {
      setDate(weeksAgo);
      setEndDate(today);
    }
    if (e.target.value === "3일") {
      setDate(threeDays);
      setEndDate(today);
    }
    if (e.target.value === "1개월") {
      setDate(oneMonth);
      setEndDate(today);
    }
    if (e.target.value === "3개월") {
      setDate(threeMonth);
      setEndDate(today);
    }
  };
  
     <DatePick
            date={date}
            setDate={setDate}
            endDate={endDate}
            setEndDate={setEndDate}
          />
  
  

위는 날짜 버튼을 누를 떄 마다 datepicker의 속성 값을 변경해주는 함수의 코드이다. Datepicker가 실행되는 부모 컴포넌트 이기도 하다.

코드를 입력하세요

function DatePick({ date, setDate, endDate, setEndDate }) {
  return (
    <Fragment>
      <PickerWrapper>
        <NewDatePicker
          selected={date}
          onChange={(date) => setDate(date)}
          dateFormat="yyyy-MM-dd"
          placeholderText="클릭해주세요....."
        />
        <span>~</span>
        <NewDatePicker
          selected={endDate}
          onChange={(date) => setEndDate(date)}
          dateFormat="yyyy-MM-dd"
          placeholderText="클릭해주세요....."
        />
      </PickerWrapper>
    </Fragment>
  );
}

위는 datepicker라는 라이브러리의 기본값들을 설정해놓은 자식컴포넌트 Datepick이다.