React.js with pickadate.js

component.jsx

// How to get the pickadate to mount correcty in React.js component
// requires jQuery and pickadate.js (https://github.com/amsul/pickadate.js/)

var Component = React.createClass({

  getInitialState: function() {
    return ({value: null});
  },

  componentDidMount: function() {
    this.setupDatepicker();
  },

  componentDidUpdate: function() {
    this.setupDatepicker();
  },

  setupDatepicker: function() {
    // cache this so we can reference it inside the datepicker
    var comp = this;
    // the element
    var el = this.refs.datepicker;
    $(React.findDOMNode(el)).pickadate({
      format: 'yyyy-mm-dd',
      formatSubmit: 'yyyy-mm-dd',
      selectMonths: true,
      selectYears: 5,
      closeOnSelect: true,
      onSet: function(e) {   
        // you can use any of the pickadate options here
        var val = this.get('select', 'yyyy-mm-dd');
        el.setState({value: val});
        comp.onDateChange({target: {value: el.state.value}});
        // auto close on select
        this.close();
      }
    });
  },
  
  onDateChange: function (event) {
    this.setState({operand: event.target.value});
  },
  
  render: function () {
    return (<input type="date" ref="datepicker" value={this.state.value} onChange={this.onDateChange} />);
  }
  
});

I updated this for the latest version of React.

import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';

// How to get the pickadate to mount correcty in React.js component
// requires jQuery and pickadate.js (https://github.com/amsul/pickadate.js/)

export default class PickADate extends React.Component
{

    constructor(props) {
        super(props);

        this.datepicker = React.createRef();

        this.state = {
            value: props.value || ''
        };

        this.onDateChange = this.onDateChange.bind(this);
    }

    componentDidMount() {
        this.setupDatepicker();
    }

    componentDidUpdate() {
        this.setupDatepicker();
    }

    setupDatepicker() {
        // cache this so we can reference it inside the datepicker
        var comp = this;
        // the element
        var el = this.datepicker;
        $(ReactDOM.findDOMNode(el.current)).pickadate({
            format: 'yyyy-mm-dd',
            formatSubmit: 'yyyy-mm-dd',
            selectMonths: true,
            selectYears: 5,
            closeOnSelect: true,
            onSet: function(e) {
                // you can use any of the pickadate options here
                var val = this.get('select', 'yyyy-mm-dd');
                // Call event handler
                comp.onDateChange(val);
                // auto close on select
                this.close();
            }
        });
    }

    onDateChange(newDate) {
        this.setState({ value: newDate });

        if(this.props.onChange) {
            this.props.onChange(newDate);
        }
    }

    render() {
        return (<input type="date" ref={this.datepicker} defaultValue={this.state.value} />);
    }
}

Use like this (both props are optional):

<PickADate value="2018-09-05" onDateChange={(newDate) => console.log("The new date value is " + newDate)} />