[React -5] ReactDatePicker 라이브러리로 기간 설정 구현

회원관리, 판매내역, 거래내역 등 테이블이 있는 페이지에 기간 설정을 추가하려고 한다 

 

 

✅ React-DatePicker 라이브러리 설치

npm install react-datepicker

https://reactdatepicker.com/

React Datepicker crafted by HackerOne

 

 

 

기본 default는 달력의 요일이 영어로 표시되어 있는데 한글로 표시하려고 한다

 

 

✅ date-fns 설치

npm install date-fns

 

코드 상단에 사용하고 싶은 언어를 import해준다

import { ko } from "date-fns/esm/locale";

locale={ko}

props로 추가해준다

 

 

날짜 형식은 ' / ' 형태로 나오는데 '년 월 일'으로 적용하고자 한다 

dateFormat="yyyy년 MM월 dd일"

 

props로 추가해준다

 

 

import React, { Component } from "react";
import DatePicker from "react-datepicker";
import { ko } from "date-fns/esm/locale";
import "react-datepicker/dist/react-datepicker.css";

export default class UserInfo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            startDate:null,
            endDate:null,
        }
    }
    
    setChangeDate=(dates)=>{
        const [start,end]=dates;
        this.setState({startDate:start,endDate:end})
    }
    
    render() {
        return (
            <div> 
               <DatePicker 
                    selectsRange={true}
                    className="datepicker"
                    locale={ko}
                    dateFormat="yyyy년 MM월 dd일"
                    selected={this.state.startDate}
                    startDate={this.state.startDate}
                    endDate={this.state.endDate}
                    maxDate={new Date()}
                    onChange={(dates)=>this.setChangeDate(dates)}/>
            </div>
        );
    }
}

 

넘겨주는 값들

⚙️ selectsRange

범위 설정을 지정할 지 선택 

 

⚙️ maxDate

최대 선택할 수 있는 날짜를 현재날짜 new Date() 로 지정해줌

 

⚙️ onChange 

날짜를 선택했을 때 실행되는 함수 [시작날짜, 마지막날짜] 배열을 파라미터로 넘겨준다)

 

스타일 변경

.datepicker{
    text-align: center;
    width: 320px;
    padding:8px 20px;
    border-width: 1px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    margin-right: 15px;
}

 

 

결과물