'react-datepicker' integration with 'redux-form@5.2.3'

react-datepicker-redux-form.js

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

export class DateInput extends Component{

    constructor (props) {
        super(props);
        if(this.props.field.value) {
            this.state = { selectedDate: moment(this.props.field.value) }
        }else{
            this.state = { selectedDate: undefined }
        }
    }

    syncDatePickerWithField = () => {
        if(this.state.selectedDate && this.props.field.value && this.props.field.value !== this.state.selectedDate.format(DATE_FORMAT)) {
            console.log('unsynced datepicker field detected')
            //console.log(this.props.field.value, '!=', this.state.selectedDate.format(DATE_FORMAT))
            this.handleChange(moment(this.props.field.value)) // ❗ this line is needed to correctly display the formatted date in the input field
        }
    }

    componentWillMount() {
        this.syncDatePickerWithField()
    }
    componentDidUpdate() {
        this.syncDatePickerWithField()
    }

    handleChange = (date) => {
      this.setState({ selectedDate: date });
      this.props.field.onChange(date.format(DATE_FORMAT)) // ❗ this line is needed to correctly display the formatted date in the input field
    }

    render() {
        const { field, label, ...rest } = this.props
        return (
            <div>
              <label>{label}</label>
              <DatePicker {...field} dateFormat={DATE_FORMAT} selected={this.state.selectedDate} onChange={this.handleChange}/>
            </div>
        )
    }
}