React-day picker with redux form

Question

i need to make react-day picker component compatible with redux form. I know this is not absolutey right but redux form is manadatory for my current project. But i struggle to make it. I used react date picker which i made it compatible with this way:

import React from 'react';
import { PropTypes } from 'prop-types';
import DatePicker from 'react-datepicker';
import moment from 'moment';
import { injectIntl, intlShape } from 'react-intl';
import 'react-datepicker/dist/react-datepicker.css';

    const MyDatePicker = props => (
      <div>
        <DatePicker
          {...props.input}
          dateFormat="DD-MM-YYYY"
          selected={props.input.value
            ? moment(props.input.value, 'DD-MM-YYYY')
            : null}
          placeholderText={props.placeholder}
          disabled={props.disabled}
        />
        {
          props.meta.touched && props.meta.error &&
          <span className="error">
            { props.intl.formatMessage({ id: props.meta.error }) }
          </span>
        }
      </div>
    );

    MyDatePicker.propTypes = {
      input: PropTypes.shape().isRequired,
      placeholder: PropTypes.string,
      disabled: PropTypes.bool,
      meta: PropTypes.shape().isRequired,
      intl: intlShape.isRequired
    };

    export default injectIntl(MyDatePicker);

but i struggle to make it with react day picker. Can anyone help me for achieving this?

score 1 · Accepted Answer · answered May 07 '17 at 13:59

1

I had a similar issue months back where the project called for redux forms and a date picker. The solution I came to was to wrap the date picker into it's own component and then wrap that component in another component, which then got used as a custom input component in redux forms.

I imagine you won't have to wrap as many times as I did but the concept should still be similar. Take a look at the code in this question as it shows an example of how to incorporate a date picker with redux-forms:

How to onFocus and onBlur a React/Redux form field that's connected to React Date Picker?

answered May 07 '17 at 13:59

Kyle Truong

2,545
8
34
50

Thanks for you answer Kyle. But i must do this procedure for react-day picker which is different from date-picker. But it seems that i'm missing things...:( – RamAlx May 07 '17 at 14:03
sorry i was wrong but im gonna read this carefuly. Thanks mate ;) – RamAlx May 07 '17 at 14:05
Which things are you missing? The two date pickers seem similar enough that you can plop one in place of the other, maybe with a few modifications. What errors are you getting with your current approach or what's not working as expected? – Kyle Truong May 07 '17 at 14:06
im not getting errors in the console...But my day picker doesnt seem to work. I cant understand what i'm missing :/ – RamAlx May 07 '17 at 14:07
With this code it says that it cannot get setState of null – RamAlx May 07 '17 at 14:22
Something is happening with activeDateWidget – RamAlx May 07 '17 at 14:45
I remember one of the tricky parts of dealing with react date components was that both the wrapper component and the date component had their own local state. I needed local state in the wrapper component to control some unique properties, and I think I ultimately made another wrapper (hack) to wrap the wrapper to do so. Sorry, wish I was able to write cleaner code. – Kyle Truong May 07 '17 at 14:55
I copy paste your code ;) but why i'm getting this error in my console. Your code is undestandable enough ;) – RamAlx May 07 '17 at 15:00

React-day picker with redux form

1 Answers1