lecture.js

import React from 'react'
import $ from 'jquery'
import 'jquery-ui/datepicker'
import 'jquery-ui/themes/ui-lightness/jquery-ui.css'

var Datepicker = React.createClass({
  getDefaultProps() {
    return {
      onChange() {}
    }
  },

  getNode() {
    var node = React.findDOMNode(this)
    return $(node)
  },

  componentDidMount() {
    this.getNode().datepicker({
      onSelect: this.props.onChange,
      onClose: () => {
        this.props.onClose()
      },
      defaultDate: this.props.value,
    })
  },

  componentDidUpdate(prevProps) {
    if (prevProps.isOpen !== this.props.isOpen)
      if (this.props.isOpen)
        this.getNode().datepicker('show')
      else
        this.getNode().datepicker('hide')
  },

  handleChange(event) {
    this.props.onChange(event.target.value)
  },

  render() {
    console.log(this.props.value)
    return <input {...this.props} onChange={this.handleChange}/>
  }
})

var App = React.createClass({

  getInitialState() {
    var date = new Date()
    return {
      date: `${date.getMonth()+1}/${date.getDate()+1}/${date.getFullYear()}`,
      datepickerIsOpen: false
    }
  },

  handleDateChange(date) {
    this.setState({ date })
  },

  toggleDatepicker() {
    this.setState({
      datepickerIsOpen: true
    })
  },

  render() {
    return (
      <div>
        <h1>Datepicker!</h1>
        <p>{this.state.date}</p>
        <button onClick={this.toggleDatepicker}>toggle</button>
        <Datepicker
          value={this.state.date}
          onChange={this.handleDateChange}
          isOpen={this.state.datepickerIsOpen}
          onClose={() => this.setState({ datepickerIsOpen: false })}
        />
      </div>
    )
  }
})

React.render(<App/>, document.getElementById('app'))