Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

This is my ideal for combine redux form and react datepicker #1051

EroticCode opened this issue Oct 3, 2017 · 4 comments


Copy link

commented Oct 3, 2017

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) {
    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

    },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 () {
} } 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...


This comment has been minimized.

Copy link

commented Dec 22, 2017

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 (
            selected={props.input.value || null}

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.


This comment has been minimized.

Copy link

commented Sep 25, 2018

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


This comment has been minimized.

Copy link

commented Sep 25, 2018

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 (
            selected={props.input.value || null}
            dateFormat={props.showTimeSelect ? 'lll' : 'll'}
            timeFormat={props.showTimeSelect ? 'HH:mm' : ''}

This comment has been minimized.

Copy link

commented Dec 12, 2018

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) => {

      if (endDate.diff(startDateValue, 'days') > 60) {
        change('endDate', moment(startDateValue).add(60, 'd'));
    minDate={moment.utc().subtract(65, 'day')}
    maxDate={moment.min(endDate, moment.utc())}

Here's the link:

Hope this helps someone!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
4 participants
You can’t perform that action at this time.