[React] 리액트에서 달력(Calendar) 사용하기

DatePicker를 사용할 수도 있지만,

npm을 설치해서 리액트 캘린더를 사용하려고 한다.

먼저, 

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

이 사이트에 들어가면 확인할 수 있다.

1. 설치

$ npm install react-calendar 또는

$ yarn add react-calendar으로 설치하면된다.

2. Import

사용하기 위해서는 임포트(Import)해야한다.

import Calendar from 'react-calendar'

으로 선언한뒤에,

<Calendar /> 호출하게 되면, 달력이 나온다.

새로운 date 값을 얻기 위해서는 onChange 이벤트를 사용하면 된다.

또한, 오늘 날짜를 강조하고 싶다면, value값으로 Date() 를 주면 된다.

              <Calendar

                className={classes.calendar}

                onChange={this.onDateChange} 

                value={this.state.date}

              />

state에서는 

state= {

    date: new Date(),

}

이런식으로 있을 것이다. 

  onDateChange = date => { 

    this.setState({

      date: moment(date).format("YYYY-MM-DD")

    })

  };

이렇게 하게 되면, 선택한 날짜가 dete값으로 들어가 원하는대로 날짜를 찾을 수 있다.