[react] react-datepicker 사용법

react datepicker

 

react  datepicker 

라이브러리 사용법입니다.

 

구현 내용

- react, hooks 방식, style은 모두 제외, 상태관리로 useContext 사용
- 버튼 클릭시 datepicker 출현
- datepicker는 마지막일 클릭시 사라짐
- datepicker에서 시작일, 마지막일 클릭시, 화면에 출력
- 화면에 날짜 출력시 연,월,일 문자열로 반환하여 출력

 

react-datepicker

실무에서 캘린더, datepicker 를 사용할 일이 있어서,
구글로 리액트 datepicker 라이브러리 서칭 후, 가장 유명한 react-datepicker을 설치 후 사용하였습니다. 

 

react-datepicker 홈페이지

https://www.npmjs.com/package/react-datepicker

react-datepicker

 

react-datepicker 데모

아래 링크로 들어가 데모를 보고, 사용할 datepicker를 선택합니다.

https://reactdatepicker.com/#example-date-range-for-one-datepicker

React Datepicker crafted by HackerOne

 

저는 하나의 달력으로 기간을 선택할 수 있는 datepicker 를 선택하였고,
그 코드를 그대로 복사하여 사용합니다.

 

react-datepicker 설치

npm 설치

npm install react-datepicker --save

 

datepicker import

import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

 

부모 컴포넌트

import React, { useState, useContext } from 'react';
import DatePickerOne from '../Common/DatePickerOne';
import { MainContext } from "../../../mobile/datas/Store"; //store MainContext import

const CardSetting = () => {
const { dateSet } = useContext(MainContext);
const [openDatePicker, setOpenDatePicker] = useState(false);
const showDatePicker = () => {
setOpenDatePicker(!openDatePicker);
}

return (
    <>
      <div className='relative'>
        <button onClick={showDatePicker}>직접 입력</button> //버튼 클릭시 datepicker 출현
        <div>
          <DatePickerOne showDatePicker={showDatePicker} /> //자식 컴포넌트
        </div>
      </div>

      <div>{dateSet.start && dateSet.start} //시작일
       ~ {dateSet.end && dateSet.end} //마지막일
      </div>
    </>
  );
};

export default CardSetting;

 

datepicker 컴포넌트

가이드의 코드를 그대로 가져온 후 약간의 커스텀을 하였습니다.

import React, { useState, useContext } from 'react';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { MainContext } from .../Store"; //store MainContext import

const DatePickerOne = ({ showDatePicker }: any) => {
	const { onDateSetting } = useContext(MainContext); //MainContext의 날짜 세팅 함수
    const [startDate, setStartDate] = useState(new Date());
    const [endDate, setEndDate] = useState(null);
    const onChange = (dates: any) => {
        const [start, end] = dates;
        setStartDate(start);
        setEndDate(end);
        onDateSetting(start, end); //store에 날짜값 보내기
        if (start && end) { //마지막일 클릭시 datepicker 사라짐
            showDatePicker();
        }
    };

    return (
        <DatePicker
            selected={startDate}
            onChange={onChange}
            startDate={startDate}
            endDate={endDate}
            selectsRange
            inline
        />
    );

};

export default DatePickerOne;

 

 

Store

여기서 날짜 string 출력 함수는 useContext를 이용한 상태 관리, store에서 합니다.

부모 컴포넌트에서 store에 저장되어있는 날짜를 불러 옵니다.  

export const MainContext = createContext({
  onDateSetting: (a: any, b: any) => { },
  dateSet: { start: "", end: "" },
});

const Store = (props: any) => {
  const [dateSet, setDateSet] = useState({ start: "", end: "" });

  const onDateSetting = (start: any, end: any) => { //날짜 문자열로 세팅
      if (start && end) {
        const startDay = start.getFullYear().toString() + `.` 
        + (start.getMonth() + 1).toString() //Month는 +1
        + `.` + start.getDate().toString();
        const endDay = end.getFullYear().toString() 
        + `.` + (end.getMonth() + 1).toString() //Month는 +1
          + `.` + end.getDate().toString();

        return setDateSet({ start: startDay, end: endDay });
      } else {
        return;
      }
    }
  }
  
 ...

 

화면 결과