TimePicker CSS Styling

Smart.TimePicker is an element used for selection of time (hours and minutes).

Required files

Smart.TimePicker requires the following scripts to be referenced on a page in order for the custom element to be successfully registered and to work correctly:

  • smart.element.js -- this is the base file that defines the common architecture of all Smart custom elements. It is part of the repository ni-kismet/smart-element.
  • smart.timepicker.js -- this file defines the functionality of the Smart.TimePicker custom element.
  • smart.draw.js -- this file contains SVG rendering functionality used in Smart.TimePicker.
  • smart.numeric.js -- this file contains functions used for the processing of numeric objects.
  • smart.math.js -- this file contains mathematical functions used by the Smart.TimePicker custom element.

Smart.TimePicker also requires the following style sheets in order to be displayed correctly:

  • smart.base.css -- the base style sheet file.

Initialization

To initialize (instantiate) a Smart.TimePicker custom element, insert the following tag in an HTML page:

<smart-time-picker></smart-time-picker>

To set properties of the custom element initially, do so by setting the respective attributes of the tag, e.g.:

<smart-time-picker format="24-hour"></smart-time-picker>

Getting and setting properties dynamically

Before accessing the custom element's API in JavaScript, the custom element's instance has to be retrieved:

let customElement = document.querySelector('smart-time-picker');

Properties are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to get a property dynamically:

let minuteInterval = customElement.minuteInterval;

Here is an example showing how to set a property dynamically:

customElement.minuteInterval = 5;

Calling methods

Before accessing the custom element's API in JavaScript, the custom element's instance has to be retrieved:

let customElement = document.querySelector('smart-time-picker');

Methods are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to call a method:

customElement.setHours(5);

Styling (CSS API)

Smart HTML Elements use a pair of css files - smart.base.css and smart.[theme name].css. The base stylesheet creates the styles related to the element's layout like margin, padding, border-width, position. The second CSS file applies the HTML Element's colors, fonts, borders and backgrounds. The smart.base.css should be included before the second CSS file.

CSS selectors

The following CSS selectors can be used to style Smart.TimePicker:

  • smart-time-picker - applied to the whole TimePicker element. Can be used for setting width, height and font-related CSS properties.
    • .smart-header - applied to the header of the TimePicker.
    • .smart-hour-minute-container - applied to the container of the hour and minute labels.
      • .smart-hour-container - applied to the hour label.
      • .smart-minute-container - applied to the minute label.
    • .smart-am-pm-container - applied to the container of the AM and PM labels.
      • .smart-am-container - applied to the AM label.
      • .smart-pm-container - applied to the PM label.
    • .smart-selected - applied to the hour, minute, AM or PM labels when they are selected.
    • .main - applied to the container of the circular SVG picker and the footer.
    • .smart-svg-picker - applied to the circular SVG picker.
      • .smart-needle - applied to the body of the SVG arrow.
      • .smart-needle-central-circle - applied to the central SVG circle and to the circular head of the SVG arrow.
      • .smart-label - applied to labels in the circular SVG picker.
    • .smart-footer - applied to the footer.