Using react-dates with redux-form results in an error

Question

I am trying to use react-dates with redux-form. Did a render thing for it. I have handled text input and select fields pretty much the same way. Those are working fine. Getting a funky error on either DateRangePicker or even SingleDatePicker, which I cannot make sense of. Any ideas/suggestions are greatly appreciated.

Did a render component as:

const renderDateRangePicker = ({
  input,
  focusedInput,
  onFocusChange,
  startDatePlaceholderText,
  endDatePlaceholderText
}) => (
  <DateRangePicker
    onDatesChange={(start, end) => input.onChange(start, end)}
    onFocusChange={onFocusChange}
    startDatePlaceholderText={startDatePlaceholderText}
    endDatePlaceholderText={endDatePlaceholderText}
    focusedInput={focusedInput}
    startDate={(input.value && input.value.startDate) || null}
    startDateId="startDateId"
    endDateId="endDateId"
    endDate={(input.value && input.value.endDate) || null}
    minimumNights={0}
  />
)

My class is just a form as:

class ActivityForm extends Component {
  // values: ['startDate', 'endDate']
  state = {
    focusedInput: null
  }

  onFocusChange(focusedInput) {
    this.setState({ focusedInput });
  }

  render () {
    const { focusedInput } = this.state
    const { handleSubmit, teams } = this.props

    return (
      <form onSubmit={handleSubmit} className="activity__form">
        <div className="activity__form_row">
          <Field
            name="name"
            label="Activity name"
            component={renderTextField}
            margin="normal"
            validate={[required]}
            className="activity__form_field_name"
            InputLabelProps={{
              shrink: true,
            }}
          />
          <div className="activity__form_spacer"/>
          <Field
            name="daterange"
            onFocusChange={this.onFocusChange}
            focusedInput={focusedInput}
            component={renderDateRangePicker}
          />
          <div className="activity__form_spacer"/>
          <Button className="activity__form_button" type="submit">Save</Button>
        </div>
      </form>
    )
  }
}

export default reduxForm({ form: 'activity' })(ActivityForm)

For some reason, DateRangePicker causes a strange error: Uncaught TypeError: Cannot read property 'createLTR' of undefined.

What am I missing?

Did you import 'react-dates/initialize' at the beginning of your application? — qkr, Mar 16 '18 at 15:37

score 0 · Answer 1 · answered Nov 05 '18 at 08:23

0

I believe this error is caused by missing or misplaced import of the initialization of react-dates, you can take a look at the Initialize section in (https://github.com/airbnb/react-dates)

answered Nov 05 '18 at 08:23

Darko

26
3

Nkoro Joseph Ahamefula · Answer 2 · 2019-11-27T07:44:52.190

import 'react-dates/initialize';

It also looks like there is an update to DateRangePicker:

So include starteDateId and endDateId as props to the DateRangePicker component.

<DateRangePicker
      startDateId="2" // PropTypes.string.isRequired,
      endDateId="1" // PropTypes.string.isRequired,
      startDate={this.props.filters.startDate}
      endDate={this.props.filters.endDate}
      onDatesChange={this.onDatesChange}
      focusedInput={this.state.calendarFocused}
      onFocusChange={this.onFocusChange}
      showClearDates={true}
      numberOfMonths={1}
      isOutsideRange={() => false}
    />

It worked for me.

Using react-dates with redux-form results in an error

2 Answers2