'DatePicker'에 해당되는 글 1건

  1. 2018.12.28 [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값으로 들어가 원하는대로 날짜를 찾을 수 있다.
















Posted by sungho88
,