How to use react dates properly

Question

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?

Daniel Andrei · Accepted Answer · 2018-01-03T08:52:14.197

6

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}
/>

edited Jan 03 '18 at 08:52

answered Jan 03 '18 at 08:22

Daniel Andrei

2,654
15
16

I've removed the node_modules and did a fresh install. I still get the same error. I never set the startDateId anywhere, as in the documentation it just stays to do what i've done. Any other advice on what could be wrong? – Strahinja Ajvaz Jan 03 '18 at 08:46
@strahinja i've edited my response accordingly, sorry for the confusion. – Daniel Andrei Jan 03 '18 at 08:52
Thank you very much! Fixed! – Strahinja Ajvaz Jan 03 '18 at 08:54
They are both required in the TypeScript definitions – olefrank Nov 27 '18 at 08:45

How to use react dates properly

1 Answers1