Learner Learner - 18 days ago 7
Javascript Question

input box not filled with the selected date

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

Change your onDateChange function and date props as following:

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

This should solve your solution.