DateRangePicker from react-date-range not showing more than 2 months in infinite scrollable mode

Question

I am using DateRangePicker from react-date-range and I want a scrollable date range picker. I copied the exact code of infinite scrollable daterangepicker from their demo into my react project but it showed wrong results. I also searched a lot about this but did not find any related article. I am attaching the screenshots of code and results as well.

Code

First month being shown

Second month being shown

No months being shown after that

I tried searching about this issue on github and stackOverflow too but could not find any solution. It is difficult to find any solution because this package is also not updated since 2 years and is unmaintained. If anyone can help solve it, would be awesome.

Answer 1

Mine is working Fine. Note That I'm using "react-date-range": "^1.4.0" version. Check yours version of react-date-range package. I have also faced problem in the latest version of react-date-range package.

import { useEffect, useRef, useState } from 'react';
import { DateRangePicker } from 'react-date-range';
import { Button } from '@mui/material';
import format from 'date-fns/format';
import { addDays } from 'date-fns';

import 'react-date-range/dist/styles.css';
import 'react-date-range/dist/theme/default.css';

import './DateRange.css';
const DateRangeComp = () => {
    const [range, setRange] = useState([
        {
            startDate: new Date(),
            endDate: addDays(new Date(), 7),
            key: 'selection',
        },
    ]);

    // open close
    const [open, setOpen] = useState(false);

    // get the target element to toggle
    const refOne = useRef(null);

    useEffect(() => {
        document.addEventListener('keydown', hideOnEscape, true);
        document.addEventListener('keydown', hideOnEnter, true);
        document.addEventListener('click', hideOnClickOutside, true);
    }, []);

    const hideOnEscape = (e) => {
        // console.log(e.key)
        if (e.key === 'Escape') {
            setOpen(false);
        }
    };
    const hideOnEnter = (e) => {
        // console.log(e.key)
        if (e.key === 'Enter') {
            setOpen(false);
        }
    };
    const hideOnClickOutside = (e) => {
        if (refOne.current && !refOne.current.contains(e.target)) {
            setOpen(false);
        }
    };

    return (
        <div className='calendarWrap'>
            <Button variant='outlined' color='inherit' onClick={() => setOpen(!open)}>
                {`${format(range[0].startDate, 'MM/dd/yyyy')} - ${format(
                    range[0].endDate,
                    'MM/dd/yyyy',
                )}`}
            </Button>

            <div ref={refOne} style={{ position: 'absolute', zIndex: 999 }}>
                {open && (
                    <DateRangePicker
                        onChange={(item) => setRange([item.selection])}
                        editableDateInputs={true}
                        moveRangeOnFirstSelection={false}
                        ranges={range}
                        months={2}
                        direction='horizontal'
                        className='calendarElement'
                        showSelectionPreview={true}
                        responsive={true}
                    />
                )}
            </div>
        </div>
    );
};

export default DateRangeComp;