React-datepicker: This is my ideal for combine redux form and react datepicker

[EroticCode]

i have problem combine redux form and datepicker range i found some example but they code large and i can't follow , I think this is solution so simple but i'm not sure wrong or right.

  import React from 'react';
import DatePicker from 'react-datepicker';
import moment from 'moment';
import 'react-datepicker/dist/react-datepicker.css';
import { Field, reduxForm , change } from 'redux-form';
import { connect } from 'react-redux';
class RangeState extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      startDate: moment(),
      endDate: moment()
    }
  }

  handleChange = ({ startDate, endDate }) => {
    startDate = startDate || this.state.startDate
    endDate = endDate || this.state.endDate
    if (startDate.isAfter(endDate)) {
      var temp = startDate
      startDate = endDate
      endDate = temp
    }

    this.setState({
      startDate,
      endDate
    },function functionName() {
      this.props.dispatch(change('simple', 'start', this.state.startDate.format("YYYY/MM/DD")));
      this.props.dispatch(change('simple', 'end', this.state.endDate.format("YYYY/MM/DD")));
    })

  }

  handleChangeStart = (startDate) => this.handleChange({ startDate })

  handleChangeEnd = (endDate) => this.handleChange({ endDate })
  render () {
    return 

      

        
        
        
         
      
    
  }
}
const form = reduxForm({
  form: 'simple' // a unique identifier for this form
})(RangeState)

export default connect()(form);

I follow example libary and add some code :

1. I connect redux for dispatch
2. I callback function Setstate and set value for feild redux form ( and use class Hide boostrap hide this feild ).

who have bester solution please comment...

[pfarnach]

I think you've over-complicated it. Let Redux Form handle the datepicker's state using its onChange method.

My datepicker field component looks something like this:

const ReduxFormDateRange = (props) => {
    return (
        <DatePicker
            selected={props.input.value || null}
            onChange={props.input.onChange}
        />
    )
}

where props.input are just the regular input props that Redux Form passes in via the Field component. If you really need a hook into the onChange method, you could set up a function inside of this component that calls the input.onChange indirectly.

[kkseven07]

selected={props.input.value || null} onChange={props.input.onChange}

does not work with time(showTimeSelect). After selecting the date and time, the input only shows the date. Any solutions? Thanks

[pfarnach]

If I'm following the question, you need to include the dateFormat and timeFormat props. I pass in a prop (boolean) via the <Field> component called showTimeSelect and use it like this (simplified for the example) in the Redux Form Date Range component:

const ReduxFormDateRange = (props) => {
    return (
        <DatePicker
            selected={props.input.value || null}
            onChange={props.input.onChange}
            showTimeSelect={props.showTimeSelect}
            dateFormat={props.showTimeSelect ? 'lll' : 'll'}
            timeFormat={props.showTimeSelect ? 'HH:mm' : ''}
        />
    )
}

[tom-wagner]

For those still trying to figure out how to get Redux Form and ReactDatepicker to work well together try considering the change prop in Redux form passed to onChange from ReactDatepicker.

In the example below I do this to ensure startDate and endDate on my form are never more than 30-days apart:

```
const StartDatePicker = ({
input: { onChange, value }, endDate, change,
}: PropsWithEndDate) => (
onChange={(startDateValue) => {
onChange(startDateValue);

  if (endDate.diff(startDateValue, 'days') > 60) {
    change('endDate', moment(startDateValue).add(60, 'd'));
  }
}}
dateForm="MM/DD/YYYY"
selectsStart
selected={value}
startDate={value}
endDate={endDate}
minDate={moment.utc().subtract(65, 'day')}
maxDate={moment.min(endDate, moment.utc())}
monthsShown={2}

/>
);
````

Here's the link: https://redux-form.com/8.0.4/docs/api/props.md/#-code-change-field-string-value-any-function-code-

Hope this helps someone!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.