React-Flatpickr integration

order.jsx

const pickr = require('../common/pickr');

// ...

const OrderForm = FormHoc(class extends React.Component {

    constructor(props) {
        super(props);
        this.state = { };
        this.setLoadingDateInput = this.setLoadingDateInput.bind(this);
        this.loadingDateInput = null;
        this.loadingDateCalendar = null;
    }
  
    setLoadingDateInput(e) {
        if (this.loadingDateCalendar) {
            this.loadingDateCalendar.destroy();
        }
        this.loadingDateInput = e;
        this.loadingDateCalendar = pickr(this.loadingDateInput, (selectedDates, date) => {
            this.props.valueChange('loading_date', date);
        });
    }
  
    componentWillReceiveProps(props) {
        const date = props.values.loading_date;
        if (date !== this.props.values.loading_date) {
            // things that depend on date
        }
    }
  
    render() {
      const {
          errors,
          values,
          inputChange
      } = this.props;
      return (
          <form className='vt-form-full'>
              <TextInput
                  name='loading_date'
                  id='order-loading_date'
                  label='Laadimise kuupäev'
                  placeholder='Laadimise kuupäev'
                  value={values.loading_date}
                  error={errors.loading_date}
                  onChange={inputChange}
                  inputRef={this.setLoadingDateInput}
                  inputClass='vt-form-control-date'/>
          </form>
      );
    }
});

pickr.js

// Helper to construct a flatpickr instance.

module.exports = (element, fn) => {
    return flatpickr(element, {
        dateFormat: 'd.m.Y',
        locale: 'et',
        onChange: fn
    });
};