Unable to hide and show react-date-range picker package on date selection

Question

I am stuck with an issue. I am not able to hide and show the react-date-range picker on date selection. Actually, I am using a package for date range selection, Here's the package link - https://www.npmjs.com/package/react-date-range.

This package does not support hiding the date picker once the date range picker is selected. But according to my requirement, the date picker should be visible once the user clicks on the start date or selected date input and should close once the end date is selected.

I have used a state to toggle the view of the date range picker to show it once the user clicks on the input field and closes it on the onChange event. But when ver the user clicks on the date picker it closes since the onChange event is triggered.

Here's my code for a better understanding

import React from 'react'

// import date-range-picker css
import 'react-date-range/dist/styles.css'; // main style file
import 'react-date-range/dist/theme/default.css'; // theme css file

import { DateRangePicker } from 'react-date-range';

export interface IDateRangePickerProps {
    range: any[],
    onChange: (range: any) => void
}

const CustomDateRangePicker: React.FC<IDateRangePickerProps> = ({ range, onChange }) => {
    const TODAY = new Date();

    return (
        <DateRangePicker
            months={2}
            minDate={TODAY}
            direction="horizontal"
            ranges={range}
            onChange={onChange}
        />
    )
}

export default CustomDateRangePicker;

In the above code, we have created a component to make the react-date-range picker easier to reuse throughout the application.

Here's the implementation of the react-date-range picker

import React, { useEffect, useState } from "react";
import CustomDateRangePicker from "../../components/daterangepicker/DateRangePicker";
import { format } from "date-fns";

const PropertyRoomTypes = () => {
    const [showDateRangePicker, setShowDateRangePicker] = useState(false);
    const [selectionRange, setSelectionRange] = useState<any[]>([{
        startDate: null,
        endDate: null,
        key: 'selection',
    }]);

    const onDateRangeChange = (range: any) => {
        setSelectionRange([range.selection])
        if (selectionRange[0].startDate && selectionRange[0].endDate) {
            setShowDateRangePicker(false);
        }
    }

    const formatDate = (date: any) => {
        if (date) {
            let res = format(new Date(date), "dd MMM yyyy");
            return res;
        } else {
            return;
        }
    }

    return (
        <>
            <div className="add__room__type__meal__plan__wrapper px-0 mx-0">
                <div className="room__rates__edit__date__range__picker" onClick={() => setShowDateRangePicker(!showDateRangePicker)}>
                    <div className="date__range__picker__icon"><i className="bi bi-calendar"></i></div>
                    <div className="date__range__label">{`${selectionRange[0].startDate && selectionRange[0].endDate ? formatDate(selectionRange[0].startDate) + " | " + formatDate(selectionRange[0].endDate) : "Select Dates"}`}</div>
                    {/* <div className="date__range__label">Select Dates</div> */}
                </div>

                {showDateRangePicker &&
                    <CustomDateRangePicker
                        range={selectionRange}
                        onChange={onDateRangeChange}
                    />
                }
            </div>
        </>
    );
};

export default PropertyRoomTypes;

Any help would be much appreciated.

Answer 1

When user do first selection, both dates are the same... So, you should compare it... something like that:

  useEffect(() => {
    if (selectionRange.startDate !== selectionRange.endDate) {
      showDateRangePicker(false);
    }
  }, [selectionRange]);