DatePicker in Redux Form

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?

Pass the change callback from redux-forms like component={field => DateInput(field, this.props.change)} and use it in your DatePicker export default (field, change) as onChange={value => change('date-to', value)} — elmeister, Feb 23 '17 at 18:15

score 13 · Accepted Answer · answered Feb 23 '17 at 23:15

13

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

answered Feb 23 '17 at 23:15

Trey Granderson

670
3
8
19

1

In my case, I obtained a warning using this approach: Warning: Failed prop type: Invalid prop `value` of type `object` supplied to `DatePicker`, expected `string` in DatePicker. So, I added the event onChange() to fix it: ` input.onChange(moment(date).format('YYYY/MM/DD'))} />` – Jason Glez May 13 '18 at 21:17

Luan Nguyen · Answer 2 · 2017-05-09T20:44:12.377

3

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)} />
    );
};

edited May 09 '17 at 20:44

answered May 09 '17 at 20:35

Luan Nguyen

186
1
5

onChange={(event, value) => input.onChange(value)}, this event will help to update data to to redux. – Luan Nguyen May 09 '17 at 20:45
What's autoOk prop?? – RamAlx May 10 '17 at 06:52
By default, for getting value from date picker, we need to do 2 steps. Step1: Choose a date on date picker. Step 2: Click OK button for getting that value. – Luan Nguyen Jun 03 '17 at 15:32
But if autoOk = true, we just choose a date on date picker and can get the new value. – Luan Nguyen Jun 03 '17 at 15:33

score 0 · Answer 3 · answered Sep 19 '17 at 06:16

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

DatePicker in Redux Form

3 Answers3

Linked