React DatePicker - Click outside day of month and calendar auto close, can't not select end date?

Question

React DatePicker - Click outside day of month and calendar auto close, can't not select end date?

When i clicked April 30 then React DatePicker auto close. And I not choose end date. enter image description here

But when I click May 1 or any day of May i't work well.

I try shouldCloseOnSelect={false} but not work.

export const DateRangePicker = ({ fromDate, toDate, onDatesChange }: DateRangePickerProps) => {
  const [startDate, setStartDate] = useState(fromDate)
  const [endDate, setEndDate] = useState(toDate)

  const clearDates = () => {
    setStartDate(null)
    setEndDate(null)
    onDatesChange(null, null)
  }

  // eslint-disable-next-line react/display-name
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const FilterDateButton: FC = forwardRef<any, any>(({ value, onClick }, ref) => (
    <div
      className='flex justify-between items-center border rounded-lg p-2 shadow-sm mt-1_5 filter-date-button w-full'
      onClick={onClick}
      ref={ref}
    >
      <div
        className={clsx({
          'text-gray-400': !startDate && !endDate,
          'text-gray-900': startDate && endDate,
        })}
      >
        {value || 'DD/MM/YYYY'}
      </div>

      <div className='flex items-center gap-x-2'>
        {startDate && endDate && (
          <X
            className='cursor-pointer'
            size={20}
            onClick={event => {
              event.stopPropagation()
              clearDates()
            }}
          />
        )}

        <Calendar className='cursor-pointer' size={20} />
      </div>
    </div>
  ))

  const handleChangedDateRange = (dates: [Date | null, Date | null], event: SyntheticEvent) => {
    event.stopPropagation()
    event.preventDefault()

    const [start, end] = dates
    setStartDate(start)
    setEndDate(end)

    if (start && end) {
      onDatesChange(start, end)
    }
  }

  return (
    <div className='custom-date-picker'>
      <DatePicker
        dateFormat='dd/MM/YYYY'
        onChange={(dates: [Date | null, Date | null], event: SyntheticEvent) => handleChangedDateRange(dates, event)}
        startDate={startDate}
        endDate={endDate}
        maxDate={new Date()}
        selectsRange
        useWeekdaysShort
        monthsShown={2}
        popperPlacement='bottom-start'
        customInput={<FilterDateButton />}
        renderCustomHeader={({ monthDate, decreaseMonth, increaseMonth }) => (
          <div className='flex justify-between items-center bg-white p-2'>
            <ChevronLeft strokeWidth={2} size={20} className='gray-900 cursor-pointer' onClick={decreaseMonth} />
            <span className='text-base font-medium'>{isoToFormat(monthDate.toISOString(), 'MMM yyyy')}</span>
            <ChevronRight strokeWidth={2} size={20} className='gray-900 cursor-pointer' onClick={increaseMonth} />
          </div>
        )}
      />
    </div>
  )
}

I want when click day outside month panel still open to select end date.

Answer 1

If you don't want your calendar to get closed on any condition, simply change your prop from shouldCloseCalendar={false} to shouldCloseCalendar={() => false}

Also if you want to define the conditions or reason when you don't want the calendar to hide, so it has 4 reasons we can choose one or multiple

If you want to specify conditions under which the calendar should remain open, you can use:

<DateRangePicker shouldCloseCalendar={({ reason }) => reason !== 'outsideAction'} />

This ensures the calendar remains open except when clicking outside of it.

If you want to allow the calendar to close for certain reasons but remain open for others, you can define it like this:

<DateRangePicker shouldCloseCalendar={({ reason }) => reason !== 'escape'} />

This allows the calendar to close on button click, outside action, or selection, but not on pressing the escape key.

If you need to handle multiple reasons, you can use logical operators within the function:

<DateRangePicker shouldCloseCalendar={({ reason }) => reason !== 'escape' && reason !== 'outsideAction'} />

This ensures the calendar remains open unless the reason is either pressing the escape key or clicking outside of it.

Remember, CloseReason type includes: "buttonClick", "escape", "outsideAction", or "select".

Hope it clears.