개발/React
[React] 리액트에서 달력(Calendar) 사용하기
sungho88
2018. 12. 28. 10:24
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값으로 들어가 원하는대로 날짜를 찾을 수 있다.