input box not filled with the selected date

Question

I am using react-dates library of airbnb for date picker. However, its now working while using it along with redux form. When i click on the select date button, calendar pops up . While selecting the date, the input box is shown empty instead of selected date.

My problem is the selected date is not shown on the input box.

Here is my code

const renderDateRangePicker = ({
  input,
  focused,
  onFocusChange,
}) => (
  <SingleDatePicker
    id="date_input"
    onDateChange={(value) => input.onChange(value.date)}
    onFocusChange={onFocusChange}
    focused={focused}
    date={(input.value && input.value.date) || null}
    className="form-control"
  />
);

onFocusChange({ focused }) {
  this.setState({ focused });
}

const { focused } = this.state;

<Field
  name="Fecha"
  onFocusChange={this.onFocusChange}
  focused={focused}
  component={renderDateRangePicker}
/>

How can i show the selected date on the input box in a way that the selected date is preserved too?

Answer 1

Change your onDateChange function and date props as following:

onDateChange={(value) => input.onChange(value)} 
date = {input.value || null}

This should solve your solution.