DatePicker in Redux Form - forms

Question

i'd like to use DatePicker for selecting date using redux form.
I create this:
import React from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
export default field => (
<div>
<DatePicker
onChange={field.value}
selected={field.value}
isClearable={true}
>
{field.children}
</DatePicker>
{field.meta.touched && field.meta.error &&
<span className="error">{field.meta.error}</span>}
</div>
);
<div className="form-group">
<div className="col-xs-12 col-sm-3 ">
<div className="label" htmlFor="date-to">DATE TO</div>{' '}
<Field
id="date-to"
name="date-to"
component={DateInput}
/>
</div>
</div>
But it does not return any values and the does not show the date in the field
What should i do?

Answer 1

You want to wrap the DatePicker element that it can be used as a component on "Field" like this:
const renderDatePicker = ({input, placeholder, defaultValue, meta: {touched, error} }) => (
<div>
<DatePicker {...input} dateForm="MM/DD/YYYY" selected={input.value ? moment(input.value) : null} />
{touched && error && <span>{error}</span>}
</div>
);
export default renderDatePicker
Refer to this GitHub issue for more information: https://github.com/Hacker0x01/react-datepicker/issues/543

Answer 2

export const renderDatePicker = ({ input, label, meta: { touched, error }, ...custom }) => {
return (
<DatePicker {...input} {...custom} autoOk={true} dateForm='MM/DD/YYYY' onChange={(event, value) => input.onChange(value)} />
);
};

Answer 3

export const Datepicker = ({
input, id, label, required, className, disabled, intl, popoverAttachment, popoverTargetAttachment, popoverTargetOffset, todayButton,
meta: { touched, error, invalid } }) => (
<FormGroup color={`${touched && invalid ? 'danger' : ''}`} className={`${required ? 'required ' : ' '}${className}`}>
{label && <Label htmlFor={id}>{label}</Label>}
<DatePicker
className="form-control"
{...input}
fixedHeight
todayButton={todayButton}
label={label}
id={id}
dateForm="MM/DD/YYYY"
selected={input.value ? moment(input.value) : null}
disabled={disabled}
popoverAttachment={popoverAttachment}
popoverTargetAttachment={popoverTargetAttachment}
popoverTargetOffset={popoverTargetOffset}
/>
{touched && error && <FormFeedback>{intl.formatMessage(error)}</FormFeedback>}
</FormGroup>
);
You can make your own component field of datepicker like i mentioned above and used it in Field of redux