// Using an ES6 transpiler like Babel
import  React from 'react';
import ReactDOM from 'react-dom';
import DateTimePicker from 'react-mobile-scrolldatetimepicker';

class App extends React.Component {
    state = {
        time: new Date(),
        isOpen: false,
    }
 
    handleClick = () => {
        this.setState({ isOpen: true });
    }
 
    handleCancel = () => {
        this.setState({ isOpen: false });
    }
 
    handleSelect = (time) => {
        this.setState({ time, isOpen: false });
    }
 
    render() {
        return (
            <div className="App">
                <a
                    className="select-btn"
                    onClick={this.handleClick}>
                    select time
                </a>
 
                <DateTimePicker
                    value={this.state.time}
                    isOpen={this.state.isOpen}
                    onSelect={this.handleSelect}
                    onCancel={this.handleCancel} />
            </div>
        );
    }
}
 
 
ReactDOM.render(<App />, document.getElementById('react-box'));