如何在 react-datepicker 的时间 select 下拉列表中添加图标？

Question

我正在使用 react-datepicker 库构建自定义时间选择器并覆盖了某些样式，但是我正在努力弄清楚如何向时间添加图标select dropdown 即每当你 select 一次，右边就会出现一个复选标记。

代码片段：

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

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

这是相关文档的link： https://reactdatepicker.com/#example-select-time-only

我的目标是在下面的示例中 selected 时间的右侧添加一个复选标记：

我知道 customInput 道具，但这只是自定义输入而不是 select 下拉菜单。

提前感谢任何提示

Answer 1

您可以在相关 sass 文件中更改 DatePicker 的默认样式，如下所示：

.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: '13';
         padding-left: 5px;
      }
   }
}

附加样式后，组件看起来：

如何在 react-datepicker 的时间 select 下拉列表中添加图标？

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

react-datepicker