11. DatePicker

DatePicker는 사용자가 날짜를 선택할 수 있는 UI 요소입니다.

주로 웹 사이트나 애플리케이션에서 날짜를 입력해야 할 때 사용됩니다.

사용자가 원하는 날짜를 선택하면 해당 날짜를 뷰에 표시하거나 해당 날짜를 서버에 전송할 수 있습니다.

 

1. DatePicker 설치하기

npm i react-datepicker

2. DatePicker 코드 적용하기

기간 설정하는 DatePicker 만들기

1) import

import DatePicker from "react-datepicker";

2) 시작 날짜, 종료 날짜 데이터 useState 저장

  // dateRange는 [startDate, endDate] 형태의 배열을 값 가짐
  const [dateRange, setDateRange] = useState([null, null]);
  //dateRange 변수를 startDate와 endDate 프로퍼티로 전달
  const [startDate, endDate] = dateRange;

3) DatePicker component

  <DatePicker
      // selectsRange 프로퍼티를 true로 설정하면 범위 선택 모드가 활성화되어 startDate와 endDate를 동시에 선택가능
      selectsRange={true}
      startDate={startDate}
      endDate={endDate}
      // dateRange 상태 변수를 업데이트
      onChange={(update) => {
        setDateRange(update);
      }}
      // withPortal 프로퍼티를 true로 설정하면 달력이 렌더링되는 위치를 설정,기본값은 false
      withPortal
    />

 4) 구현된 uI