Cannot select time when selectsRange prop is true

[yubinjodev]

Describe the bug
When selectsRange is true, selecting the date along with time causes a type error. Just selecting the dates does not.

To Reproduce
Steps to reproduce the behavior:

  const [startDate, setStartDate] = useState<Date | null>(null)
  const [endDate, setEndDate] = useState<Date | null>(null)

  const handleChange = ([newStartDate, newEndDate]:[Date, Date]) => {
    setStartDate(newStartDate);
    setEndDate(newEndDate);
  };

  return (
    <DatePicker
        selected={startDate}
        onChange={handleChange}
        selectsRange
        startDate={startDate}
        endDate={endDate}
        dateFormat="yyyy-MM-dd HH:mm:ss"
        timeFormat="HH:mm:ss"
        showTimeSelect
    />
  );

1. Select date
2. Select time

Expected behavior
I expected that I could select a range that includes both date and time

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome
• Version: 123.0.6312.87

Smartphone (please complete the following information):
None

Additional context
None

[phazei]

I also have this issue. There's no support for selecting a time range.

[phazei]

This is a duplicate of #4177 and #3673

[amishaaggarwal]

i am facing the same issue...is there any update on this?

[akegvd]

2025 still waiting 2m usage

[dimazuien]

Upvote on this. I'd like to have a datetime range selection but range works for dates only. Pickers with time and datetime lack this feature. The only way to do it now is to have 2 separate fields.

[balajis-qb]

I'll work on this as a part of #3673

[martijnrusschen]

Fix proposed in #6079