Hacker0x01 / react-datepicker

A simple and reusable datepicker component for React

Home Page:https://reactdatepicker.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Cannot select time when selectsRange prop is true

yubinjodev opened this issue · comments

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
image

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