DateTimePicker CSS Styling

Smart.DateTimePicker represents a custom element which can be used to select and display date and time data.

Required files

Smart.DateTimePicker 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.datetimepicker.js -- this file defines the main functionality of the Smart.DateTimePicker custom element.
  • smart.date.js -- this file defines the TimeSpan and DateTime classes used in Smart.DateTimePicker.
  • smart.button.js -- this file contains the smart-repeat-button custom element. The spin buttons of Smart.DateTimePicker are instances of smart-repeat-button.
  • smart.calendar.js -- this file contains the smart-calendar custom element. An instance of smart-calendar can optionally be shown in the dropdown of Smart.DateTimePicker. The following files are also required for the initialization of smart-calendar:
    • smart.scrollbar.js
    • smart.listbox.js
    • smart.dropdownlist.js
    • smart.tooltip.js
  • smart.timepicker.js -- this file contains the smart-time-picker custom element. An instance of smart-time-picker can optionally be shown in the dropdown of Smart.DateTimePicker. The following files are also required for the initialization of smart-time-picker:
    • smart.numeric.js
    • smart.math.js
    • smart.draw.js

Smart.DateTimePicker 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.DateTimePicker custom element, insert the following tag in an HTML page:

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

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

<smart-date-time-picker calendar-button spin-buttons value="new Smart.Utilities.DateTime(2016, 5, 25)"></smart-date-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-date-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 max = customElement.max;

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

customElement.max = new Smart.Utilities.DateTime(2050, 1, 1);

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-date-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.open();

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

  • smart-date-time-picker - applied to the whole DateTimePicker element. Can be used for setting width, height and color- and font-related CSS properties.
    • .smart-spin-buttons-container - applied to the spin buttons container.
    • .smart-spin-button - applied to spin buttons.
      • .smart-arrow - applied to spin button arrows.
      • .smart-arrow-up - applied to the arrow of the increment spin button.
      • .smart-arrow-down - applied to the arrow of the decrement spin button.
    • .active - applied to an active spin button.
    • smart-date-time-picker > .smart-container > input - applied to the input of the DateTimePicker.
    • .smart-calendar-button - applied to the calendar button.
    • .smart-calendar-button-pressed - applied to the calendar button when it is pressed.
    • smart-date-time-picker smart-calendar - applied to the calendar dropdown. It is an instance of smart-calendar and its inner elements can be styled as specified in the Smart.Calendar CSS API.
    • .hover - applied to spin buttons, the input and the calendar button when they are hovered.

The elements in the default footer of the calendar dropdown can be styled by using the following CSS selectors:

  • .smart-hour-element - applied to the hour input.
  • .smart-minute-element - applied to the minute input.
  • .smart-am-pm-element - applied to the AM/PM input.
  • .smart-today-element - applied to the "Now" icon/button.

CSS variables

Smart.DateTimePicker uses the following CSS variables:

  • --smart-date-time-picker-calendar-button-width -- used to set the width of the calendar button of Smart.DateTimePicker. Default value is 30px.
  • --smart-date-time-picker-spin-buttons-width -- used to set the width of the spin buttons container of Smart.DateTimePicker. Default value is 20px.
  • --smart-date-time-picker-drop-down-width -- used to set the width of the calendar dropdown. Default value is 250px.
  • --smart-date-time-picker-drop-down-height -- used to set the height of the calendar dropdown. Default value is 275px.