Date Time Picker - CSS API Reference

All Common CSS variables:

• --smart-primary: The theme primary color.
• --smart-primary-color: Text color on top of a primary background.
• --smart-secondary: The theme secondary color.
• --smart-secondary-color: Text color on top of a secondary background.
• --smart-error: The theme error color.
• --smart-error-color: Text color on top of a error background.
• --smart-success: The theme success color.
• --smart-success-color: Text color on top of a success background.
• --smart-background: The theme background color. The background color appears behind scrollable content.
• --smart-background-color: Text color on top of a background background.
• --smart-surface: The theme surface color. Surface colors affect surfaces of components, such as cards, sheets, and menus.
• --smart-surface-color: Text color on top of a surface surface.
• --smart-disabled: The theme primary color in disabled state.
• --smart-disabled-color: Text color on top of a theme background in disabled state.
• --smart-ui-state-hover: Hover state background.
• --smart-ui-state-color-hover: Text color, when UI Element's state is 'hover'.
• --smart-ui-state-border-hover: Border color, when UI Element's state is 'hover'.
• --smart-ui-state-active: Active state background.
• --smart-ui-state-color-active: Text color, when UI Element's state is 'active'.
• --smart-ui-state-border-active: Border color, when UI Element's state is 'active'.
• --smart-ui-state-focus: Focus state background.
• --smart-ui-state-color-focus: Text color, when UI Element's state is 'focus'.
• --smart-ui-state-border-focus: Border color, when UI Element's state is 'focus'.
• --smart-ui-state-selected: Selected state background.
• --smart-ui-state-color-selected: Text color, when UI Element's state is 'selected'.
• --smart-ui-state-border-selected: Border color, when UI Element's state is 'selected'.
• --smart-item-border-width: Border width of items.
• --smart-item-border-radius: Border radius of items.
• --smart-item-border-top-left-radius: Border top-left radius of items.
• --smart-item-border-top-right-radius: Border top-right radius of items.
• --smart-item-border-bottom-left-radius: Border bottom-left radius of items.
• --smart-item-border-bottom-right-radius: Border bottom-right radius of items.
• --smart-font-size: Theme font-size.
• --smart-font-family: Theme font-family.
• --smart-font-family-icon: Theme icons font-family.
• --smart-border-width: Theme border-width.
• --smart-border-radius: Theme border-radius.
• --smart-border-top-left-radius: Border top-left radius.
• --smart-border-top-right-radius: Border top-right radius.
• --smart-border-bottom-left-radius: Border bottom-left radius.
• --smart-border-bottom-right-radius: Border bottom-right radius.
• --smart-border: The theme border settings.
• --smart-outline: The theme border color.
• --smart-arrow-size: Font size of the arrow elements.
• --smart-editor-selection: Background color of the selected text.
• --smart-editor-selection-color: Color of the selected text.
• --smart-alternation-index0-color: Alternation color for index0.
• --smart-alternation-index0-border-color: Alternation border color for index0.
• --smart-alternation-index0-background: Alternation background color for index0.
• --smart-alternation-index1-color: Alternation color for index1.
• --smart-alternation-index1-border-color: Alternation border color for index1.
• --smart-alternation-index1-background: Alternation background color for index1.
• --smart-alternation-index2-color: Alternation color for index2.
• --smart-alternation-index2-border-color: Alternation border color for index2.
• --smart-alternation-index2-background: Alternation background color for index2.
• --smart-tick-color: Default tick color for smartTank, smartSlider and smartGauge.
• --smart-tick-label-color: Default tick label color for smartTank, smartSlider and smartGauge.
• --smart-box-height: Default height for Dialog, Gauge, Accordion, Tabs, Tree, Array.
• --smart-box-width: Default width for Dialog, Gauge, Accordion, Tabs, Tree, Array.
• --smart-bar-height: Default height for headers and footers.
• --smart-bar-width: Default width for headers and footers.
• --smart-editor-height: Default height for editors.
• --smart-editor-width: Default width for editors.
• --smart-editor-drop-down-width: Default width for editors drop-down.
• --smart-editor-drop-down-height: Default height for editors drop-down.
• --smart-editor-label-padding: Default padding for inputs.
• --smart-editor-addon-width: Default width for spin buttons, dropdown buttons.

Specific CSS variables for Date Time Picker styling:

• --smart-date-time-picker-default-width: smartDateTimePicker default width.
• --smart-date-time-picker-default-height: smartDateTimePicker default height.
• --smart-date-time-picker-header-opacity: Defines elements headers opacity.
• --smart-date-time-picker-header-opacity-active: Defines elements header opacity in active state.

The following CSS selectors can be used to style 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-container - the container that holds the internals of the element.
    • .smart-label - the label of the element.
    • .smart-content - a container for the internal contents of the element.
      • .smart-input .smart-date-time-input - an input element for the datetime string.
      • .smart-spin-buttons-container - applied to the spin buttons container.
        • .smart-spin-button - the common class for the spin buttons.
          • .smart-arrow .smart-arrow-up - applied to the arrow of the increment spin button.
    • .smart-spin-button - the common class for the spin buttons. * .smart-arrow .smart-arrow-down - applied to the arrow of the decrement spin button.
      • .smart-drop-down-button .smart-calendar-button - applied to the calendar button.
      • .smart-drop-down .smart-date-time-drop-down - a container for the drop down elements.
        • .smart-drop-down-header - a container for the drop down calendar.
      • DIV element - a DIV element used to change to Date selection view.
      • DIV element - a DIV element used to change to Time selection view.
        • .smart-drop-down-content - a container for the drop down calendar.
          • 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 smartCalendar CSS API.
      • .smart-hint - the hint of the element

Demo

<style>
        #datetimepicker{
                --smart-color: #ccc;
                --smart-font-size: 20px;
        }
</style>