更改 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）

很遗憾，我认为您无法设置出现在<span class="k-time-highlight"> 下的<li class="k-item"> 的样式，因为没有上下文可以指示它何时位于覆盖层之下。