React-dates: Failed styles prop type check while trying to render DateRangePicker

[asulaiman]

Overview
I tried applying the DateRangePickerWrapper example along with the application of react-styles for theming but i m getting the following error:

Failed prop type: The prop styles is marked as required in DateInput, but its value is undefined.

My wrapper component

import React from 'react';
import 'react-dates/initialize';
import 'react-dates/lib/css/_datepicker.css';
import { DateRangePicker } from 'react-dates';
import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
import aphroditeInterface from 'react-with-styles-interface-aphrodite';
import DefaultTheme from 'react-dates/lib/theme/DefaultTheme';
import PropTypes from 'prop-types';
import momentPropTypes from 'react-moment-proptypes';
import omit from 'lodash/omit';


ThemedStyleSheet.registerInterface(aphroditeInterface);

const propTypes = {
    autoFocus: PropTypes.bool,
    autoFocusEndDate: PropTypes.bool,
    initialStartDate: momentPropTypes.momentObj,
    initialEndDate: momentPropTypes.momentObj,
    selectedBgColor: PropTypes.string,
    selectedTextColor: PropTypes.string,
};
const defaultProps = {
    autoFocus: false,
    autoFocusEndDate: false,
    initialStartDate: null,
    initialEndDate: null,
    selectedBgColor: '#02C8A4',
    selectedTextColor: '#fff',
};
export class DateRange extends React.Component {
    constructor(props) {
        super(props);
        let focusedInput = null;
        if (props.autoFocus) {
            focusedInput = 'startDate';
        } else if (props.autoFocusEndDate) {
            focusedInput = 'endDate';
        }
        this.state = {
            focusedInput,
            startDate: props.initialStartDate,
            endDate: props.initialEndDate,
        };
        ThemedStyleSheet.registerTheme({
            reactDates: {
                ...DefaultTheme.reactDates,
                color: {
                    ...DefaultTheme.reactDates.color,
                    selected: {
                        backgroundColor: props.selectedBgColor,
                        color: props.selectedTextColor,
                    },
                },
            },
        });
    }

    onDatesChange = ({ startDate, endDate }) => {
        this.setState({ startDate, endDate });
    }

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

    render() {
        const { focusedInput, startDate, endDate } = this.state;
        // These props are needed on the wrapper level but are not part of the airbnb single date picker
        // If we dont do this, an error is thrown by the component :/
        const props = omit(this.props, [
            'autoFocus',
            'autoFocusEndDate',
            'initialStartDate',
            'initialEndDate',
            'selectedBgColor',
            'selectedTextColor',
        ]);
        return (
            <DateRangePicker
                {...props}
                startDateId="start_date_input"
                endDateId="end_date_input"
                onDatesChange={this.onDatesChange}
                onFocusChange={this.onFocusChange}
                focusedInput={focusedInput}
                startDate={startDate}
                endDate={endDate}
            />
        );
    }
}
DateRange.propTypes = propTypes;
DateRange.defaultProps = defaultProps;

Is there a step i am missing? Previous threads tend to suggest trying to set an interface which i am already doing. Note: Identical setup works for the SingleDatePicker with the exception of the startDate endDate props which differ here ofcourse.

[ljharb]

You shouldn't need import 'react-dates/initialize'; if you're registering your own aphrodite interface, as long as you add https://github.com/airbnb/react-dates/blob/master/src/utils/registerInterfaceWithDefaultTheme.js#L6 - can you try that?

[asulaiman]

No change, same error.

[ljharb]

What exact version of react-dates are you using?

[asulaiman]

16.0.1

[rodolph66]

I seem to be having a similar issue... I cannot shake away that warning:

I have followed every detail in the documentation and changed some... but the warning just won't go away. Mind you, it is not impacting much the app's performance, it is a mere annoyance, at least for now...

[ljharb]

@rodolph66 those are legitimate errors, and unrelated to this issue.

[majapw]

@rodolph66 startDateId and endDateId are required props on the component (this is recent). We updated this behavior to have parity with the SingleDatePicker and for accessibility reasons. If you add id props on your DateRangePicker you should see the warning go away.

@asulaiman Can you try registering your theme at the top-level instead of inside the constructor and see if that changes anything?

[rodolph66]

Thanks majapw, the warning did go away when supplying the id props. Initially it failed because I supplied the wrong type (my mistake). Thank a lot...

[asulaiman]

@majapw yes now it renders. However that defeats the purpose of theming for me because i wanted to change theme attributes based on props passed into the component. This works for SingleDatePicker.

[majapw]

@asulaiman Hmm, so the react-with-styles theme is meant to be done only once on an app-wide basis. My guess is that you're doing it multiple times (rendering DateRange more than once) which is blowing up the theme and causing some strange issues.

It looks like you're rendering multiple DateRangePickers and you want each one to have a different selected color, yeah? There is a way of doing that, but it is a bit more complicated. It is on my TODO list to add a section to the README to give more detail on that. I will try to do a write-up today.

[majapw]

Also as @ljharb mentioned, you should not need

import 'react-dates/initialize';
import 'react-dates/lib/css/_datepicker.css';

in your code if you're doing your own customization.

[ghost]

@majapw hi how would add id props to the component. sorry I am a total newbie and resolve the issue. any help will be much appreciated. Thank you..!

[ghost]

@rodolph66 hi how did you mange to add the id props to the component to resolve the issue? I tried varied different steps without any success to get rid of the "startDateId is marked as required in withStyles(DateRangePicker)," issue. Thank you so much for any help you can provide. Thank you again.

[rodolph66]

You can use uuid which generates ids, but even simpler just make up your own. It has to be string format. Any combination of characters should work. I tried both and they did work. But using uuid for this is abit too much I guess...!!!

[AhmedAbdulrahman]

Hi,
I am having the same issue, @ljharb you mentioned up about https://github.com/airbnb/react-dates/blob/master/src/utils/registerInterfaceWithDefaultTheme.js#L6

where should we add this ?

[majapw]

@AhmedAbdulrahman you should call that method before your first react-dates component import. :) You will also need to register an interface before your first import.

The initialize helper does both of these things for you.

[ebl22]

Hi, I've added "startDateId" and "endDateId" props and still get an error says I should supply those required props. Attached my code and the warnings

<DateRangePicker {...options} hideKeyboardShortcutsPanel minimumNights={0} startDate="null" startDateId="startDateId" endDate="null" endDateId="endDateId" />

[majapw]

That is... very surprising. Is this the only DRP you're rendering @ebl22? What version of react-dates are you on?

[ebl22]

@majapw I'm using "react-dates": "^16.2.1". The warnings disappear when I remove the props: startDate, endDate. I pass those props in the options, so maybe I got those warnings cause I passed it twice..

[ljharb]

You’re passing the string “null” - try passing the actual value: {null}

[HollyJHuber]

Setting two additional props on the DatePicker worked for me:
startDateId="start"
endDateId="end"

[ianduvall]

@asulaiman Hmm, so the react-with-styles theme is meant to be done only once on an app-wide basis. My guess is that you're doing it multiple times (rendering DateRange more than once) which is blowing up the theme and causing some strange issues.

It looks like you're rendering multiple DateRangePickers and you want each one to have a different selected color, yeah? There is a way of doing that, but it is a bit more complicated. It is on my TODO list to add a section to the README to give more detail on that. I will try to do a write-up today.

@majapw did you every get around to documenting the preferred way to do this?

[PavanGangireddy]

is this fixed, as of 18.1.1 version?

[AndreyPatseiko]

If use default example I have the same error.
Just set my state :

this.state = {
      startDate: moment(),
      endDate: moment(),
      focusedInput: null  <-----------
};

[gaurav-js-dev]

Setting two additional props on the DatePicker worked for me:
startDateId="start"
endDateId="end"

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

Fixed my isssues Thanks @HollyJHuber

[picozzimichele]

Thanks @HollyJHuber!

I can confirm that this works, just add them as static values and the console error disappears

startDateId="start"
endDateId="end"

[Mohamudsharif010]

This seems to be working for me too but dont know why i needed to add it.
startDateId="start"
endDateId="end"

[flinhong]

If use default example I have the same error.
Just set my state :

this.state = {
      startDate: moment(),
      endDate: moment(),
      focusedInput: null  <-----------
};

Already set the focusedInput, not working...