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

DateRange

달력에서 날짜의 범위를 설정하고, 설정한 날짜의 정보를 받아와 캘린더 바로 아래에 출력해본다.

react-date-range 사용을 위해서는 아래 게시물을 참고하여 패키지 설정을 완료해준다.

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

 

★ 프로젝트 구조

 

src

    ㄴ component

         ㄴ Calender.js

    ㄴ App.js

 

Calender.js 

import { DateRange } from 'react-date-range';
import { Component } from 'react';
class CalendarComponent extends Component {
  constructor(props) {
    super(props); // React.Component의 생성자 메소드를 먼저 실행
    this.state = { // 이 컴포넌트의 state 설정
      startDate: new Date(),
      endDate: new Date(),
      key: 'selection'
    };
  };
  onRangeChange = (ranges) => {
    console.log(ranges); // native Date object
    this.setState({
      startDate:ranges['selection'].startDate,
      endDate:ranges['selection'].endDate,
      key:ranges['selection'].key,
    });
  }
  render(){
    return (
      <div>
        <DateRange
          editableDateInputs={true}
          onChange={this.onRangeChange}
          moveRangeOnFirstSelection={false}
          ranges={[this.state]}/>
        <br/>
        <div>Start Date : {this.state.startDate.toString()}</div>
        <br/>
        <div>End Date : {this.state.endDate.toString()}</div>
      </div>
    )
  }
}
export default CalendarComponent;

 

editableDateInputs : 캘린더의 입력 필드에서 날짜를 편집할 수 있는지 (true일 경우에만 키보드로 입력 가능)

onChange(DateRange) : 범위 변경을 위한 콜백 함수

DateRange의 구조는 다음과 같다. (StartDate, key, EndDate)

  

moveRangeOnFirstSelection : startDate 선택 시 범위를 이동, false이면 endDate가 StartDate로 대체

true일 경우 맨 처음 설정한 range의 범위를 기억하기 때문에 다른 날짜를 선택 시 endDate가 자동으로 계산되어 표시

ranges : 날짜의 범위를 정의. 범위 객체의 배열 형태

이 외에도 다양한 옵션이 있으니 추가적인 내용은 링크를 참고한다.

 

hypeserver/react-date-range

 

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;

 

DateRangePicker

DateRangePicker의 경우 왼쪽 리스트를 사용해서 간단하게 오늘, 어제, 이번 주, 지난주, 이번 달, 지난달과 같은 기간을 표시할 수 있다. 리스트를 클릭하면 파란색(상단의 기간 선택 칸)이 해당 리스트에 해당하는 기간을 나타내는 것을 알 수 있다.

 

첫 번째 예시에서는 기간 하나를 다뤄보았지만, DateRangePicker에서는 기간 두개를 다뤄보도록 한다. 프로젝트의 구조는 첫 번째 예시와 동일하다.

 

★ 프로젝트 구조

 

src

    ㄴ component

         ㄴ Calender.js

    ㄴ App.js

 

Calender.js 

import { DateRangePicker } from 'react-date-range';
import { addDays } from 'date-fns';
import { Component } from 'react';
class CalendarComponent extends Component {
  constructor(props) {
    super(props); // React.Component의 생성자 메소드를 먼저 실행
    this.state = { // 이 컴포넌트의 state 설정
      selection: {
        startDate: new Date(),
        endDate: new Date(),
        key: 'selection'
      },
      compare: {
        startDate: addDays(new Date(), 1),
        endDate: addDays(new Date(), 3),
        key: 'compare'
      }
    };
  };
  onRangeChange = (ranges) => {
    console.log(ranges['selection']);
    console.log(ranges['compare']);
    if(ranges['selection']!=null){
      this.setState({
        selection:ranges['selection']
      })
    }
    if(ranges['compare']!=null){
      this.setState({
        compare:ranges['compare']
      })
    }
  }
  render(){
    return (
      <div>
        <DateRangePicker
          onChange={this.onRangeChange}
          months={1}
          minDate={addDays(new Date(), -300)}
          maxDate={addDays(new Date(), 900)}
          direction="vertical"
          scroll={{ enabled: true }}
          ranges={[this.state.selection, this.state.compare]}
        />
        <div style={{color:'green'}}> startDate : {this.state.selection.startDate.toString()}</div>
        <div style={{color:'green'}}> endDate : {this.state.selection.endDate.toString()}</div>
        <br/>
        <div style={{color:'blue'}}> startDate : {this.state.compare.startDate.toString()}</div>
        <div style={{color:'blue'}}> endDate : {this.state.compare.endDate.toString()}</div>
      </div>
    )
  }
}
export default CalendarComponent;

onChange(DateRange): 범위 변경을 위한 콜백 함수

months : 화면에 표시할 달의 수 default value는 1

minDate : 최소 날짜 정의. 기준으로부터 이전의 날짜는 비활성화

maxDate : 최대 날짜 정의. 기준으로부터 이후의 날짜는 비활성화

direction : months가 1보다 클 때 달력의 나열 방향 정의

scroll : 스크롤로 달력 넘기기 활성화/비활성화

ranges : 날짜의 범위를 정의. 범위 객체의 배열 형태

이 외에도 다양한 옵션이 있으니 추가적인 내용은 링크를 참고한다.

hypeserver/react-date-range

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;