1

This is DayPickerRangeController component from react-dates:

 <DayPickerRangeController
                    startDate={dates.startDate}
                    endDate={dates.endDate} 
                    onDatesChange={onDatesChange} 
                    focusedInput={focusedInput} 
                    onFocusChange={focusedInput => setFocusedInput(focusedInput)}
                    numberOfMonths={2} 
                />

I am using a functional component and the default state is:

const [dates, setDates] = useState({ startDate: null, endDate: null });
const [focusedInput, setFocusedInput] = useState(null);

This is changeDates function:

const onDatesChange = (dates) => {
    //setDates({ startDate, endDate });
    console.log(dates);
}

, but on dates change, the result is this: {startDate: null, endDate: null}

I can change the default date to invaling string like so:

const [dates, setDates] = useState({ startDate: 'jkhjkhjk', endDate: null });

and the result on bind the change event {startDate: "jkhjkhjk", endDate: null}

with the warning for invalid value for a date

gdfgdfg
  • 3,181
  • 7
  • 37
  • 83
  • 1
    works for me [codeSandBox](https://codesandbox.io/s/react-dates-date-range-picker-forked-18dtg) – antoineso Jan 29 '21 at 15:30
  • Thanks, but u are using `DateRangePicker`, The question is for `DayPickerRangeController`. You can see it here from your edited example: https://codesandbox.io/s/react-dates-date-range-picker-forked-554vw?file=/src/date-picker.jsx:85-100 – gdfgdfg Jan 29 '21 at 16:34

1 Answers1

2

The problem was that the docs are unclear about DayPickerRangeController and the reqired prop focusedInput:

enter image description here

It must be startDate and not null:

const [focusedInput, setFocusedInput] = useState('startDate');

or from constants:

 import { START_DATE, END_DATE } from 'react-dates/constants';
 ...
 const [focusedInput, setFocusedInput] = useState(START_DATE);

and be sure that is not null, like after selecting endDate:

focusedInput={focusedInput || START_DATE} // startDate

Working demo:

https://codesandbox.io/s/react-dates-date-range-picker-forked-e8qne?file=/src/date-picker.jsx

gdfgdfg
  • 3,181
  • 7
  • 37
  • 83