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.
• The sample below demonstrates how to set the 'Le Frog' theme to jqxTimePicker.