Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Click outside day of month then React DatePicker auto close, can't not select end date? #4783

Open
ThangDoanSpiderBox opened this issue May 8, 2024 · 0 comments

Comments

@ThangDoanSpiderBox
Copy link

Describe the bug
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.
Screenshot 2024-05-08 at 13 30 59

But when I click May 1 or any day of May i't work well.
Screenshot 2024-05-08 at 13 31 10

I try shouldCloseOnSelect={false} but not work.

To Reproduce

This is my code

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
        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>
  )
}

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

Thank team 🧡

@ThangDoanSpiderBox ThangDoanSpiderBox changed the title React DatePicker - Click outside day of month and calendar auto close, can't not select end date? Click outside day of month and calendar auto close, can't not select end date? May 8, 2024
@ThangDoanSpiderBox ThangDoanSpiderBox changed the title Click outside day of month and calendar auto close, can't not select end date? Click outside day of month then React DatePicker auto close, can't not select end date? May 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant