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값으로 들어가 원하는대로 날짜를 찾을 수 있다.
'개발 > React' 카테고리의 다른 글
| [React] You should not use <Link> outside a <Router> 에러 (0) | 2019.01.31 |
|---|---|
| [React] material ui로 TextField 사용 중, 유효성(validation) 체크하는 방법 (0) | 2019.01.03 |
| React에서 component 안에서 div의 height를 최대(100%)로 지정하는 방법 (1) | 2018.12.04 |
| [React] 리액트(React)에서 SCSS 사용하는 방법 & 설정 방법 (0) | 2018.10.18 |
| [React] react-router-dom 설치가 안 될때, 전역으로 설치해야합니다. (0) | 2018.10.16 |
