html - 更改 Kendo UI Timepicker 突出显示的文本颜色

Question

我们如何在 kendo ui 时间选择器中更改突出显示的文本颜色区域。

KENDO UI TIMEPICKER - https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/

正如您在此图像中看到的，10:30 AM是突出显示的区域。我想把那个时候的颜色改成red.

我做了很多研究，但没有找到任何解决方案，我看到下面的 html 看起来有点像。

发现如果我们改变类的颜色，<span class="k-time-highlight"></span>只有背景改变而不是文本。

此链接是提取代码 - https://silver-ranique-14.tiiny.site/

Answer 1

.k-time-highlight仅引用位于项目顶部的跨度。打开 TimePicker 时实际创建的 DOM 是（为简洁起见截断）：

• <kendo-popup>
  • <div class="k-popup">
    • <kendo-timeselector>
      • <k-time-list-container>
        • <span class="k-time-highlight">（指示所选项目的叠加层）
        • <div class="k-time-list-wrapper">（用了几个小时）
        • <div class="k-time-separator">（分隔器）
        • <div class="k-time-list-wrapper">（几分钟）
        • <div class="k-time-separator">（分隔器）
        • <div class="k-time-list-wrapper">（上午/下午）

每个k-time-list-wrapper都有以下内容：

• <kendo-timelist>
  • <kendo-virtualization>
    • <ul>
      • <li class="k-item">（对每个值重复，例如小时 1 - 23）

不幸的是，我认为您无法设置<li class="k-item">出现在下的样式，<span class="k-time-highlight">因为没有上下文指示它何时在覆盖下。