[React]달력을 이용해 날짜 범위 정보얻기1 (react-date-range)

날짜 및 날짜 범위를 선택하기 위한 React 패키지로 날짜 작업에 date-fns 모듈을 사용한다.

react-date-range에서 지원하는 Components Example은 다음과 같다.

 

Exmaple 1 : 2개의 달력을 표시

 

Exmaple 2 : 다중 범위(2개)

 

Exmaple 3 : 다중 범위(3개 이상)

 

Exmaple 4 : 날짜 입력 수정이 가능한 달력 

 

Exmaple 5 :  기본 달력

 

 

더 자세한 예시는 링크 참고

 

react-date-range를 사용하는 이유

- 상태 비 저장 날짜 작업

- 고도로 구성 가능

- 다중 범위 선택

- 기본 js date 기반

- 드래그 앤 드롭 선택

- 날짜 입력을 통한 범위 설정 가능

 

react-date-rang 사용하기

 

아래의 명령어를 이용하여 react-date-range와 date-fns를 설치한다.

 

npm install --save react-date-range

npm install --save react date-fns

 

제공하는 UI를 사용하기 위해서는 아래의 소스코드를 컴포넌트를 사용할 js의 상단에 import한다.

 

import 'react-date-range/dist/styles.css'; // main style file 
import 'react-date-range/dist/theme/default.css'; // theme css file

여기서는 프로젝트를 다음과 같이 구성하였다.

src

component

Calendar.js // 달력 컴포넌트 작성할 파일

App.js // 생성한 달력 컴포넌트를 불러올 파일

 

Calendar.js 

import { Calendar } from 'react-date-range';
import { Component } from 'react';
class CalendarComponent extends Component {
  handleSelect(date) {
    console.log(date); // native Date object   
  }   
  render(){     
    return (<Calendar date= onChange= /> );   
  } 
} 
export default CalendarComponent; 

 

App.js

 

import "react-date-range/dist/styles.css"; // main style file 
import 'react-date-range/dist/theme/default.css'; // theme css file  
import './App.css'; 
import Calendar from './component/Calendar.js'  
function App() {   
  return (     
    <div className="App">       
      <Calendar/>     
    </div>   
    ); 
}  
export default App;

 

위의 코드를 입력하면 아래와 같은 화면을 얻을 수 있다.

현재 날짜가 파란색으로 표시되며 글자를 클릭하면 콘솔창에 클릭한 날짜의 정보를 남긴다.

handleSelect를 이용해서 날짜 클릭 시 이벤트를 변경할 수 있다.  

 

아래는 클릭한 날짜에 대한 정보를 달력 옆에 표시하도록 수정한 소스코드와 결과이다.

 

Calendar.js 

import { Calendar } from 'react-date-range'; 
import { Component } from 'react'; 
import React from 'react';
 class CalendarComponent extends Component {   
  constructor(props) {     
    super(props); // React.Component의 생성자 메소드를 먼저 실행     
    this.state = { // 이 컴포넌트의 state 설정       
      date: "" // date 초기값    
    };   
  };   
  handleSelect = (_date) => {     
    console.log(_date); // native Date object     
    this.setState();   
  }   
  render(){     
    return (       
      <div>         
        <Calendar date= onChange=/>
        <div></div>       
      </div>     
    )   
  } 
} 
export default CalendarComponent; 

 

DateRange 관련 설명은 다음 게시물에 이어서 설명한다.

 

참고자료 : https://github.com/hypeserver/react-date-range