reactjsreact-reduxreact-dates

How to use react dates properly

I'm having trouble with react dates. I end up with this warning:

Failed prop type: The prop `startDateId` is marked as required in `withStyles(DateRangePicker)`, but its value is `undefined`.

Per the documentation, it states that you need to use this command:

npm install --save react-dates moment@>=#.## react@>=#.## react-dom@>=#.## react-addons-shallow-compare@>=#.##

I assume that the hashes represent the version that you're to use and since they haven't specified any, it should work with the latest ones.

The version i use are the following: 

"react-dates": "^16.0.1", "moment": "^2.20.1", "react": "^16.2.0", "react-dom": "^16.2.0", "react-addons-shallow-compare": "^15.6.2"

In my component i have the following:

import 'react-dates/lib/css/_datepicker.css';
import 'react-dates/initialize';
import { DateRangePicker } from "react-dates";

<DateRangePicker
  startDate={this.props.filters.startDate}
  endDate={this.props.filters.endDate}
  onDatesChange={this.onDatesChange}
  focusedInput={this.state.calendarFocused}
  onFocusChange={this.onFocusChanged}
/>

Can anyone tell me anything as to why im getting this error and how to remove it please?

Solution

  • Looking over the source code in v16.0.1, the startDateId is no longer a required prop for DateRangePickerInput.

    The prop is found in DateRangePickerShape.js

    Basically, the fix would be to add an id to the component like this: 

    <DateRangePicker
  startDateId="MyDatePicker"
  startDate={this.props.filters.startDate}
  endDate={this.props.filters.endDate}
  onDatesChange={this.onDatesChange}
  focusedInput={this.state.calendarFocused}
  onFocusChange={this.onFocusChanged}
/>