如何解决如何在react-datepicker的时间选择下拉菜单中添加图标?
我正在使用 react-datepicker 库构建自定义时间选择器并覆盖了某些样式,但是我正在努力弄清楚如何将图标添加到时间选择下拉列表,即每当您选择一个时间,右侧会出现一个复选标记。
代码片段:
const [startDate,setStartDate] = useState(new Date());
return (
<DatePicker
selected={startDate}
onChange={(date) => setStartDate(date)}
shouldCloseOnSelect={false}
showTimeSelect
showTimeSelectOnly
timeIntervals={15}
dateFormat="h:mm aa"
/>
);
这是相关文档的链接: https://reactdatepicker.com/#example-select-time-only
我的目标是在以下示例中在所选时间的右侧添加一个复选标记:
我知道 customInput
道具,但这只是自定义输入而不是选择下拉菜单。
提前感谢您提供任何提示
解决方法
您可以在相关的 DatePicker
文件中更改 sass
的默认样式,如下所示:
.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;
}
}
}
添加样式后,组件看起来:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。