How to remove unwanted times in react-datepicker?

Question

I want to only show the times between 9:00 and 5:00pm. Instead, they are only grayed out:

When I use:

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import './CustomTimePicker.css'; // Make sure to create this CSS file

const CustomTimePicker = () => {
  const [selectedTime, setSelectedTime] = useState(null);

  const handleTimeChange = (time) => {
    setSelectedTime(time);
  };

  return (
    <DatePicker
      selected={selectedTime}
      className="datetime-text-input-small"
      onChange={handleTimeChange}
      showTimeSelect
      showTimeSelectOnly
      timeIntervals={60}
      timeCaption="Time"
      dateFormat="h:mm aa"
      placeholderText="Leave now"
      minTime={new Date().setHours(9, 0, 0, 0)}
      maxTime={new Date().setHours(17, 0, 0, 0)}
   
  );
};

export default CustomTimePicker;

Then I get grayed out times.

I have also added .react-datepicker__time-list-item--unavailable { display: none !important; }

to my CSS, but it changed nothing.

How can I remove the unwanted times completely?

Answer 1

I use this to filter out the times

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
  display: none;
}