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