Telerik UI for Windows 8 HTML

This help article describes the rendering of the RadDatePicker and RadTimePicker controls and the associated CSS classes with each element. Additionally, an overview of the composition of the built-in skins' CSS rules is given to aid custom styling.

Both controls have identical rendering and their CSS classes differ at the picker and the selector containers .

RadDatePicker Output Copy imageCopy
<div class="t-date-picker">
    <div class="t-picker">
        <div class="t-input"></div>
        <div class="t-arrow"></div>
    </div>
</div>
<div class="t-date-selector">
    <div class="t-header"></div>
    <div class="t-body"></div>
    <div class="t-footer">
        <button class="t-cancel"></button>
        <button class="t-ok"></button>
    </div>
</div>
RadTimePicker Output Copy imageCopy
<div class="t-time-picker">
    <div class="t-picker">
        <div class="t-input"></div>
        <div class="t-arrow"></div>
    </div>
</div>
<div class="t-time-selector">
    <div class="t-header"></div>
    <div class="t-body"></div>
    <div class="t-footer">
        <button class="t-cancel"></button>
        <button class="t-ok"></button>
    </div>
</div>

Structure selectors

Both controls' elements are targeted in a similar way in the built-in skins. Below you can find CSS selector examples with RadDatePicker, but you can easily modify the selectors for RadTimePicker by replacing "date" with "time":

Class/selector name

Description

.t-date-picker

The picker container of the control.

.t-date-selector

The selector container of the control.

.t-date-picker .t-{child-name}

The CSS selector to access child elements of the picker container. Replace ".t-{child-name}" with the desired element's class name (i.e. "t-picker", "t-input", "t-arrow")

.t-date-selector .t-{child-name}

The CSS selector to access child elements of the selector container. Replace ".t-{child-name}" with the desired element's class name (i.e. "t-header", "t-body", "t-footer").

State Selectors

Description

.t-date-picker .t-picker:hover

The CSS selector for the state when the mouse hovers over the picker container.

.t-date-picker .t-picker.t-focused

The CSS selector for the state when the picker container is focused.

.t-date-picker.t-disabled

The CSS selector for the state when the control is disabled.

.t-date-picker.t-empty

The CSS selector for the state when the input box is empty.