0

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/

Cipher
  • 2,060
  • 3
  • 30
  • 58

1 Answers1

1

.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.

David
  • 5,877
  • 3
  • 23
  • 40