Documentation

Styling and Appearance

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.

Below is the list of CSS classes used by jqxTimePicker.

jqxTimePicker Style
jqx-widget - applied to jqxTimePicker.
jqx-time-picker - applied to jqxTimePicker.
jqx-header - applied to the header of the jqxTimePicker.
jqx-hour-minute-container - applied to the container of the hour and minute labels.
jqx-hour-container - applied to the hour label.
jqx-minute-container - applied to the minute label.
jqx-am-pm-container - applied to the container of the AM and PM labels.
jqx-am-container - applied to the AM label.
jqx-pm-container - applied to the PM label.
jqx-selected - applied to the hour, minute, AM or PM labels when they are selected.
jqx-main-container - applied to the main container of the circular SVG picker and the footer.
jqx-svg-picker - applied to the circular SVG picker.
jqx-needle-central-circle - applied to the central SVG circle and to the circular head of the SVG arrow.
jqx-needle - applied to the body of the SVG arrow.
jqx-label - applied to labels in the circular SVG picker.
jqx-fill-state-disabled - applied when it is disabled.
jqx-footer - applied to the footer.

When you create a custom style with colors and backgrounds for jqxTimePicker, you need to do the following:

Add the above CSS classes related to jqxTimePicker
After each CSS class, add your theme name.
For example:
jqx-time-picker-ui-le-frog
To apply your custom style to jqxTimePicker, you need to set its 'theme' property (option) to point to your theme name string.
```
$("#jqxTimePicker").jqxTimePicker({ width: 400, height: 400, theme: "ui-le-frog" });
```

The sample below demonstrates how to set the 'Le Frog' theme to jqxTimePicker.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">jqxTimePicker CSS Styling Sample.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.ui-le-frog.css" type="text/css" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtimepicker.js"></script>
    <script type="text/javascript">
        $(document).ready(function ()
        {
            $("#jqxTimePicker").jqxTimePicker({ width: 400, height: 400, theme: "ui-le-frog" });
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body>
    <div id="jqxTimePicker"></div>
</body>
</html>

Documentation

Styling and Appearance

jqxTimePicker Style