[react] datetime & moment & 이벤트

React datetime lib(https://github.com/YouCanBookMe/react-datetime) 를 사용하고 있다. 

react datetime은 내부적으로 momentjs를 사용하고 있다. 

ISO8601 데이터를 원하는 포맷(dateFormat, timeFormat)으로 맞춘다. 

<Datetime locale="ko" dateFormat="YYYY-MM-DD" timeFormat="HH:mm" 
            defaultValue={ this.props.toTime } onChange={this.changeToTime} 
            ref={(c) => this.state.toTime = c} /></td>

onChange 이벤트일 때는 내부적으로 정의한 이벤트가 아니라 momentjs 객체가 전달되는 구조이다. 

onChange

function

empty function

Callback trigger when the date changes. The callback receives the selected moment  object as only parameter, if the date in the input is valid. If the date in the input is not valid, the callback receives the value of the input (a string).

따라서 setState를 호출해 e.target.value 를 사용하면 value가 없다는 에러가 발생한다.

moment 객체를 이벤트로 보내기 때문이다.  

 
changeToTime(e) {
  
  this.setState({
        toTime: moment(e).format()
    });
}

moment(e)로 감싸고, format()을 호출하면 변경된 시간 문자열을 얻을 수 있다.