Connecting react-dates' DateRangePicker when 'onChange' combines multiple fields?

Has anyone successfully made an integration with react-dates’ DateRangePicker?

I’m confused about how to handle their onDatesChange and onFocusChange because they have two values each (the DateRangePicker). Looking at https://github.com/airbnb/react-dates/blob/26ced4d2227af948d2d1801081d3f567c33e87be/src/components/DateRangePickerInput.jsx, they do hook up the onChange property of each individual field. But I cannot figure out how to combine the “parent” DateRangePicker with redux-form.

[sww314]

For redux-form 6.8.0 and react-dates 12.2.4, I was having the same problem, none of the solutions worked great for me. Here is what I came up. There are a couple of issues to make this work:

• need 2 fields in on UI component (DateRangePicker)
• custom functions for focus + change events
• have to convert string to Moment object (and back)

import { DateRangePicker, START_DATE, END_DATE } from 'react-dates';

class DateRangePickerWrapper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      focusedInput: null,
    };
  }

  handleDatesChange = (dates) => {
    const startField = this.props[this.props.startDateFieldName];
    const endField = this.props[this.props.endDateFieldName];
    startField.input.onChange(dates.startDate);
    endField.input.onChange(dates.endDate);
  }

  handleFocusChange = (focusedInput) => {
    this.setState({ focusedInput });
    if (focusedInput === START_DATE) {
      this.props[this.props.startDateFieldName].input.onFocus();
      return;
    }
    if (focusedInput === END_DATE) {
      this.props[this.props.endDateFieldName].input.onFocus();
      return;
    }
  }

  render() {
    const startDate = this.props[this.props.startDateFieldName].input.value || null;
    const endDate = this.props[this.props.endDateFieldName].input.value || null;

    return (
      <DateRangePicker
        endDate={endDate}
        endDatePlaceholderText="End Date"
        focusedInput={this.state.focusedInput || null}
        minimumNights={0}
        onDatesChange={this.handleDatesChange}
        onFocusChange={this.handleFocusChange}
        startDate={startDate}
        startDatePlaceholderText="Start Date"
        isOutsideRange={() => false}
      />
    );
  }
}
export default DateRangePickerWrapper;

and here is the call using it:

const renderDates = fields => (
  <DateRangePickerWrapper
    startDateFieldName="start"
    endDateFieldName="end"
    {...fields}
  />
);
const formatDates = (value, name) => {
  return moment(value);
};
const normalizeDates = (name, value) => {
  return value.format();
};
....
<Fields
      names={['start', 'end']}
      component={renderDates}
      normalize={normalizeDates}
      format={formatDates}
 />

For a single field it is more straight forward:

const formatDate = (value) => {
  return moment(value);
};
const normalizeDate = (value) => {
  return value.value.format();
};
const renderDate = ({ input, label, type, meta }) => (
  <SingleDatePicker
    date={input.value}
    focused={meta.active}
    onDateChange={value => input.onChange({ value })}
    onFocusChange={({ focused }) => input.onFocus({ focused })}
  />

....

  <Field
     name="start"
    component={renderDate}
    normalize={normalizeDate}
    format={formatDate}
  />
);

[wewelll]

Here is very simple solution as well :

import React, { PureComponent } from 'react'
import 'react-dates/initialize'
import { DateRangePicker } from 'react-dates'
import 'react-dates/lib/css/_datepicker.css'

class DateRangePickerField extends PureComponent {
  state = { focusedInput: null }
  handleFocusChange = focusedInput => this.setState({ focusedInput })

  render () {
    const { meta: { error, touched }, input: { value: { startDate = null, endDate = null }, onChange } } = this.props
    const { focusedInput = null } = this.state

    return (
      <div>
        <DateRangePicker
          endDateId='endDate'
          endDate={endDate}
          endDatePlaceholderText='End Date'
          focusedInput={focusedInput}
          onDatesChange={onChange}
          onFocusChange={this.handleFocusChange}
          startDateId='startDate'
          startDate={startDate}
          startDatePlaceholderText='Start Date'
        />
        {error && touched && <span>{error}</span>}
      </div>
    )
  }
}

<Field
  component={DateRangePickerField}
  ...
/>