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.
- 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.
To apply your custom style to jqxTimePicker, you need to set its 'theme' property (option)
to point to your theme name string.
The sample below demonstrates how to set the 'Le Frog' theme to jqxTimePicker.