[Range Mode] Its possible to select a range with similar day?

[lariane-guerra]

Hi guys, its me again.
I need one more help.
React Day Picker: 9.0.1
I have this scenario:
The user can apply filters by range or on the same day.
Example: Start: 08-22-24 10:00 am to 08-23-24 3:00 pm or they can do Start: 08-22-24 10:00 am to 08-22-24 2:00 pm.

It's a range, but on the same day.

Is it possible to do this?
As it is today, when I click on the same day for the second time, it clears the range.from.

My source code:

Component use:

 <DateRangePickerComponent
  locale={brazilLocale}
  mode={'range'}
  selected={range}
  onSelect={handleSetRangeDateSelected}
  captionLayout="dropdown"
  numberOfMonths={numberOfMonths}
  max={maxRangeInterval}
  defaultMonth={handleDefaultMonth(numberOfMonths)}
  startMonth={startCalendarDate}
  endMonth={handleEndCalendarDate(disabledFuture)}
  disabled={handleDisableFutureDates(disabledFuture)}
  components={{
    Option: (props) => (
    <option
    {...props}
    style={{
    color: '#1A1A1A',
    fontFamily: 'Inter',
    backgroundColor: '#FFFFFF',
    border: 'none',
    }}
    />
   ),
  }}
  />

const defaultStartTime = () => {
    if (!startPeriod) return '0000'

    return formatTime(startPeriod as string)
  }

  const defaultEndTime = () => {
    if (!endPeriod) return '2359'

    return formatTime(endPeriod as string)
  }

  const [startTime, setStartTime] = useState(defaultStartTime)
  const [endTime, setEndTime] = useState(defaultEndTime)
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)

  const [range, setRange] = useState<DateRange | undefined>({
    from: startPeriod as Date,
    to: endPeriod as Date,
  })

  function handleSetRange() {
    const startHours = Number(startTime.slice(0, 2))
    const endHours = Number(endTime.slice(0, 2))

    const startMinutes = Number(startTime.slice(2, 4))
    const endMinutes = Number(endTime.slice(2, 4))

    const newStartDate =
      range?.from &&
      new Date(
        range?.from instanceof Date ? range.from.getFullYear() : 0,
        range?.from instanceof Date ? range.from.getMonth() : 0,
        range?.from instanceof Date ? range.from.getDate() : 0,
        startHours,
        startMinutes,
      )

    const newEndDate =
      range?.to &&
      new Date(
        range?.to instanceof Date ? range.to.getFullYear() : 0,
        range?.to instanceof Date ? range.to.getMonth() : 0,
        range?.to instanceof Date ? range.to.getDate() : 0,
        endHours,
        endMinutes,
      )

    setRange({
      from: newStartDate,
      to: newEndDate,
    })

    return {
      from: newStartDate,
      to: newEndDate,
    }
  }

  function handleStartTimeRange(value: string) {
    setStartTime(value)
  }

  function handleEndTimeRange(value: string) {
    setEndTime(value)
  }

  const hasTimeError = useMemo(() => {
    if (!isSameDay(range?.from as Date, range?.to as Date)) return

    if (startTime.length < 4 || endTime.length < 4) {
      return false
    }

    const startTimeDate = formatTimeToDate(startTime)
    const endTimeDate = formatTimeToDate(endTime)

    return isAfter(startTimeDate, endTimeDate)
  }, [range, startTime, endTime])

  function handleButtonApplyDate() {
    const newRangeWithTime = handleSetRange()
    onApplyDateField('startPeriod', newRangeWithTime?.from)
    onApplyDateField('endPeriod', newRangeWithTime?.to)
  }

  function handleSetRangeDateSelected(selected: DateRange | undefined) {
    setRange({
      from: formatTimeInDate(selected?.from, startTime),
      to: formatTimeInDate(selected?.to, endTime),
    })
    onApplyDateField('dateShortcut', '')
    onApplyDateField('startPeriod', formatTimeInDate(selected?.from, startTime))
    onApplyDateField('endPeriod', formatTimeInDate(selected?.to, endTime))
  }

  function handleButtonClearDate() {
    setRange(undefined)
    onApplyDateField('dateShortcut', '')

    onClearDateField('startPeriod', '')
    onClearDateField('endPeriod', '')
    onClearDateField('dateShortcut', '')

    setStartTime('0000')
    setEndTime('2359')
  }

Example: i want to select again the day 21.

[lariane-guerra]

I change the version and its works.