JavaScript (ES5)
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

CSS Customization in JavaScript (ES5) TimePicker control

23 Mar 2023 / 2 minutes to read

TimePicker allows you to customize the textbox and popup list appearance to suit your application by using cssClass property.

The below sample demonstrates customization of text appearance in a textbox, popup button, and popup list along with hover and active state by using e-custom-style class. Following is the list of available classes used to customize the entire TimePicker component.

Class Name Description
e-time-wrapper Applied to TimePicker wrapper element.
e-timepicker Applied to input element and TimePicker popup element.
e-time-wrapper.e-timepicker Applied to input element only.
e-input-group-icon.e-time-icon Applied to popup button.
e-float-text Applied to floating label text element.
e-popup Applied to popup element.
e-timepicker.e-popup Applied to TimePicker popup element only.
e-list-parent Applied to popup UL element.
e-timepicker.e-list-parent Applied to TimePicker popup UL element only.
e-list-item Applied to LI elements.
e-hover Applied to LI element hovering time.
e-active Applied to active LI element.
Source
Preview
index.js
index.html
style.css
Copied to clipboard
ej.base.enableRipple(true);
   
    var timepicker = new ej.calendars.TimePicker({
            placeholder:'Select Time',
        // define the custom class
        cssClass: 'e-custom-style'
    });    
    timepicker.appendTo('#element');
Copied to clipboard
<!DOCTYPE html><html lang="en"><head>
            
    <title>Essential JS 2 TimePicker control</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <!--style reference from the TimePicker component-->
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-calendars/styles/material.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <input type="text" id="element">
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Copied to clipboard
#container {
    visibility: hidden;
    max-width: 250px;
    margin: 0 auto;
}

#loader {
    color: #008cff;
    height: 40px;
    width: 30%;
    position: absolute;
    top: 45%;
    left: 45%;
}

/*customize the input element text color*/
.e-time-wrapper.e-custom-style #element { /* csslint allow: adjoining-classes */
    display: block;
    color: blue;
}

/*customize the floating label and popup button text color*/
.e-time-wrapper.e-custom-style .e-float-text.e-label-bottom, /* csslint allow: adjoining-classes */
.e-time-wrapper.e-custom-style .e-input-group-icon.e-time-icon.e-icons { /* csslint allow: adjoining-classes */
    color: blue;
}

/*customize the input element text selection*/
.e-time-wrapper.e-custom-style.e-input-group::before, /* csslint allow: adjoining-classes */
.e-time-wrapper.e-custom-style.e-input-group::after, /* csslint allow: adjoining-classes */
.e-time-wrapper.e-custom-style.e-input-group .e-timepicker::selection { /* csslint allow: adjoining-classes */
    background: blue;
}


.e-timepicker.e-popup.e-custom-style .e-list-parent.e-ul, /* csslint allow: adjoining-classes */
.e-timepicker.e-popup.e-custom-style .e-list-parent.e-ul .e-list-item { /* csslint allow: adjoining-classes */
    background-color: #c0ebff;
}

/*customize the list item hover color*/
.e-timepicker.e-popup.e-custom-style .e-list-parent.e-ul .e-list-item.e-hover, /* csslint allow: adjoining-classes */
.e-timepicker.e-popup.e-custom-style .e-list-parent.e-ul .e-list-item.e-active.e-hover { /* csslint allow: adjoining-classes */
    background-color: blue;
    color: #fff;
}

/*customize the active element text color*/
.e-timepicker.e-popup.e-custom-style .e-list-parent.e-ul .e-list-item.e-active { /* csslint allow: adjoining-classes */
    color:#333;
    background-color: #fff;
}
Previous
Next