Date Range using input with clear button Not Working

[UnikoveNeeraj]

const [dateRange, setDateRange] = React.useState([null, null]);
const [startDate, endDate] = dateRange;

function updateExecutionList(date): void {
setDateRange(date);
// props.updateExeList(date);
}
<DatePicker
selectsRange={true}

            ref={datepicker}
            startDate={startDate}
            endDate={endDate}
            isClearable={true}
            className="inputField expstart"
            placeholderText="Date"
            dateFormat="d MMM, yyyy"
            highlightDates={highlightWithRanges}
            onChange={(update): void => { 
              
                updateExecutionList(update)
              }}
          
           // customInput={<ExampleCustomInput />}
        >

When first date select calender get closed and also slected value is not showing.
any one help if i am doing somthing wrong

[sevgeek]

I have the same problem as @UnikoveNeeraj
I'm using the sample code from the official site where it works.

But in my component code, displaying the selected range doesn't work. There is also no clear values button. As you can see from the logs, the selected values are perfectly passed through the callback function in the array format.

I use "react-datepicker": "3.8.0" and "react": "16.8.4".

Me component code:

import React from "react";
import PropTypes from "prop-types";
import DatePicker from "react-datepicker";

function DateRangePicker(props) {
	const [dateRange, setDateRange] = React.useState([null, null]);
	const [startDate, endDate] = dateRange;

	/* Logging values */
	React.useEffect(() => props.onChange(dateRange), [dateRange]);

	return (
		<DatePicker
			selectsRange={true}
			endDate={endDate}
			isClearable={true}
			startDate={startDate}
			onChange={(dates) => setDateRange(dates)}
			shouldCloseOnSelect={false}
		/>
	);
}

DateRangePicker.propTypes = {
	onChange: PropTypes.func.isRequired,
};

DateRangePicker.defaultProps = {

};

export default DateRangePicker;

[dharmverma]

I am also facing the same issue, on selecting date range its not displaying selected date in Input field. here is the code, we are using

https://codesandbox.io/s/blissful-blackwell-bk56e?file=/src/App.js

[sharanya5]

I am also facing the same issue (Dates and clear button isn't displayed after selection). Used the same example from the docs. https://reactdatepicker.com/#example-date-range-using-input-with-clear-button

As a workaround, am currently using value props to pass the formatted string to be displayed in the input. Can see the clear button only if I pass the selected props. Below is the code

 const [dateRange, setDateRange] = React.useState<[Date, Date] | null>([
    date,
    date,
  ]);
  const [startDate, endDate] = dateRange || [];

  const getValue = () => {
    let dateStr = startDate ? startDate.toLocaleDateString() : "";
    if (dateStr && endDate) {
      dateStr = `${dateStr} - ${endDate?.toLocaleDateString()}`;
    }
    return dateStr;
  };
  return (
    <>
      <DatePicker
        value={getValue()}
        selected={startDate}
        startDate={startDate}
        endDate={endDate}
        selectsRange={true}
        onChange={(update: [Date, Date] | null) => {
          setDateRange(update);
        }}
        isClearable={true}
        shouldCloseOnSelect={false}
        monthsShown={2}
        {...rest}
      />
    </>
  );

[maoft]

I am experiencing the same issue and had to implement the workaround from @sharanya5 (Thanks!).

However I am also experiencing issues with the popper closing when selecting "startDate", and as such I have to open the popper again to select "endDate". I have to set "shouldCloseOnSelect" to false to keep the popper open, but then I have to manually close the popper when selecting "endDate". I expect "shouldCloseOnSelect" should be true and the popper should close only when both "startDate" and "endDate" has been filled?

[genovese]

I am having exactly this issue. When I select the first date, the calendar closes. It then re-opens to select the second date. The date range does not display in the input field, however. And no clear button shows up. My code is essentially the same as the demo code, except for where I store and retrieve the dates. I'm happy to give details as needed, but the examples above pretty much capture it.

[ItayTur]

same issue with the start selection closes the popper.
I work around it using open, onInputClick and onClickOutside props, like this:

const MyDatePicker = () => {
 const [isOpen, setIsOpen] = useState(false);
  return (
    <ReactDatePicker
      onInputClick={() => setIsOpen(true)}
      onClickOutside={() => setIsOpen(false)}
      open={isOpen}
      selectsRange={true}
      startDate={testStart}
      endDate={testEnd}
      onChange={(update: any) => {
        setDateRange(update);
        if (update[1]) {
          setIsOpen(false);
        }
      }}
      isClearable={true}
    />
  );

[sevgeek]

On version 4.1.1 the date range selection functionality works correctly!
Thanks!

function DateRangePicker() {
  const [startDate, setStartDate] = React.useState(null);
  const [endDate, setEndDate] = React.useState(null);
  const onChange = (dates) => {
    const [start, end] = dates;
    setStartDate(start);
    setEndDate(end);
  };

  return (
    <DatePicker
      selected={startDate}
      onChange={onChange}
      startDate={startDate}
      endDate={endDate}
      selectsRange
      isClearable
    />
  );
}

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.