[React] react-datetime 적용하기

Superset 에서 react-datetime 을 사용하는데, 공부를 위해 정리

react-datetime 에 설명된 건 es6 전..? 방법만 나와있다.

es6 style로 정리하면 아래와 같다.

app.css에 react-datetime.css 를 추가한다.

@import '../node_modules/react-datetime/css/react-datetime.css';

app.js 에 아래 내용을 입력한다..

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Datetime from 'react-datetime'
 
class App extends Component {
    renderDatetime(props, openCalendar, closeCalendar) {
        function clear() {
            props.onChange({target: {value: ''}});
        }
        return (
            <div>
                <input {...props} />
                <button onClick={openCalendar}>open calendar</button>
                <button onClick={closeCalendar}>close calendar</button>
                <button onClick={clear}>clear</button>
            </div>
        )
    }
 
    render() {
        return (
            <div className="App">
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <h1 className="App-title">Welcome to React</h1>
                </header>
                <p className="App-intro">
                    To get started, edit <code>src/App.js</code> and save to reload.
                </p>
 
                <Datetime
                    dateFormat="YYYY-MM-DD"
                    timeFormat={false}
                    renderInput={ this.renderDatetime }
                />
            </div>
        );
    }
}
 
export default App;
 

실행해 보면,,,

Calendar이 나오는 걸 확인 할 수 있다.