How to add an icon to time select dropdown in react-datepicker?

Question

I'm building a custom time picker using the react-datepicker library and have overridden certain styles, however I am struggling to figure out how to add an icon to the time select dropdown i.e. whenever you select a time, a checkmark appears to the right.

Code snippet:

const [startDate, setStartDate] = useState(new Date());

  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      shouldCloseOnSelect={false}
      showTimeSelect
      showTimeSelectOnly
      timeIntervals={15}
      dateFormat="h:mm aa"
    />
  );

Here is the link to the relevant docs: https://reactdatepicker.com/#example-select-time-only

My aim is to add a checkmark to the right of the selected time in the below example:

I am aware of the customInput prop, however this simply customizes the input and not the select dropdown menu.

Thanks in advance for any tips

Answer 1

You can change DatePickers default styles in a related sass file as bellow:

.react-datepicker__time-container { 
  width: 150px;

  & .react-datepicker__time .react-datepicker__time-box {
     width: 150px;
  }

  li.react-datepicker__time-list-item.react-datepicker__time-list-item--selected { 
      margin-left: 20px;
      margin-right: 20px;

      &::after {
         content: '\2713';
         padding-left: 5px;
      }
   }
}

After appending styles, the component looks: