Search code examples
htmlcsssasskendo-uikendo-timepicker

Change Kendo UI Timepicker Highlighted Text Color

How we can change the highlighted text color area in kendo ui time picker.

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

As you see in this image, 10:30 AM is the highlighted area. I want to change the color of that time to red.

I did lots of research but didn't find any solution for this, i saw the html bellow somewhat it look like.

enter image description here

Found that if we change color of class <span class="k-time-highlight"></span> only background changes not text. enter image description here

This link is extracted code - https://silver-ranique-14.tiiny.site/

Solution

  • .k-time-highlight only references a span that sits on top of the items. The DOM that actually gets created when you open the TimePicker is (truncated for brevity):

    • <kendo-popup>
      • <div class="k-popup">
        • <kendo-timeselector>
          • <k-time-list-container>
            • <span class="k-time-highlight"> (the overlay that indicates selected item)
            • <div class="k-time-list-wrapper"> (for hours)
            • <div class="k-time-separator"> (separator)
            • <div class="k-time-list-wrapper"> (for minutes)
            • <div class="k-time-separator"> (separator)
            • <div class="k-time-list-wrapper"> (for AM/PM)

    And each k-time-list-wrapper has the following:

    • <kendo-timelist>
      • <kendo-virtualization>
        • <ul>
          • <li class="k-item"> (repeated for each value, e.g. hours 1 - 23)

    Unfortunately, I don't think you're able to style the <li class="k-item"> that appears under the <span class="k-time-highlight"> because there is no context that indicates when it is under the overlay.