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.