Docs

Documentation versions (currently viewingVaadin 24)

Date Time Picker

Styling API reference for the Date Time Picker component.

CSS Selectors

The following CSS selectors can be used in stylesheets to target the various parts and states of the component. See the Styling documentation for more details on how to style components.

Root element

vaadin-date-time-picker

States

Required

vaadin-date-time-picker[required]

Focused

vaadin-date-time-picker[focused]

Keyboard focused

vaadin-date-time-picker[focus-ring]

Read-only

vaadin-date-time-picker[readonly]

Disabled

vaadin-date-time-picker[disabled]

Not empty

vaadin-date-time-picker[has-value]

Hovered

vaadin-date-time-picker:hover

Sub-Fields

Date Picker

vaadin-date-time-picker > vaadin-date-picker

Time Picker

vaadin-date-time-picker > vaadin-time-picker

See Date Picker and Time Picker selectors for details

Label

Field with label

vaadin-date-time-picker[has-label]

Label

vaadin-date-time-picker::part(label)

Label text

vaadin-date-time-picker > label

Required indicator

vaadin-date-time-picker::part(required-indicator)

Helper and Validation Error

Field with helper

vaadin-date-time-picker[has-helper]

Helper

vaadin-date-time-picker::part(helper-text)

Helper text

vaadin-date-time-picker > [slot="helper"]

Invalid field

vaadin-date-time-picker[invalid]

Error message

vaadin-date-time-picker::part(error-message)

Error message text

vaadin-date-time-picker > [slot="error-message"]