Click outside day of month then React DatePicker auto close, can't not select end date?
ThangDoanSpiderBox opened this issue · comments
ThangDoanSpiderBox commented
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.
But when I click May 1 or any day of May i't work well.
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 🧡