Date Time Picker - CSS API Reference

All Common CSS variables:

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>