render_date_picker.js

import React, { Component } from 'react';
import DatePicker from 'react-datepicker';
import moment from 'moment';
import 'react-datepicker/dist/react-datepicker.css';


import DatePickerCustomInput from './datepicker_custom_input';

class RenderDatePicker extends Component {
  constructor(props) {
    super(props);

    this.state = {
      inputValue: '',
    };
  }
  componentWillMount() {
    if (this.props.input.value.length < 10) {
      this.setState({ inputValue: null });
    } else {
      this.setState({ inputValue: moment(this.props.input.value) });
    }
  }
  componentWillReceiveProps(nextProps) {
    if (this.props.input.value !== nextProps.input.value) {
      if (nextProps.input.value.length >= 10 && moment(nextProps.input.value).isValid) {
        this.setState({ inputValue: moment(nextProps.input.value) });
      }
    }
  }

  handleChange = (date) => {
    this.setState({ inputValue: moment(date) });
    this.props.input.onChange(moment(date).toISOString());
  };
  render() {
    const {
      input,
      name,
      label,
      required,
      disabled,
      className,
      meta: { touched, error, warning },
    } = this.props;
    return (
      <div className="render-field-wrapper">
        <label htmlFor={name}>
          {label} {required && <i className="fa fa-asterisk" aria-hidden="true" />}
        </label>
        <div>
          <DatePicker
            selected={this.state.inputValue}
            onChange={this.handleChange}
            dateFormat="MM/DD/YYYY"
            placeholderText="MM/DD/YYYY"
            className={className}
            disabled={disabled}
            onBlur={() => input.onBlur(input.value)}
            peekNextMonth
            showMonthDropdown
            showYearDropdown
            dropdownMode="select"
            customInput={
              <DatePickerCustomInput
                {...input}
                pickerOnChange={input.onChange}
                onChange={this.handleRawChange}
                disabled={disabled}
              />
            }
          />
          {touched &&
            ((error && (
              <span className="field-error">
                <i className="fa fa-exclamation-triangle" aria-hidden="true" /> {error}
              </span>
            )) ||
              (warning && <span className="field-warning">{warning}</span>))}
        </div>
      </div>
    );
  }
}

export default RenderDatePicker;