Date Picker

Usage
Styling

CSS Selectors

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-picker

States

Required: vaadin-date-picker[required]
Focused: vaadin-date-picker[focused]
Keyboard focused: vaadin-date-picker[focus-ring]
Read-only: vaadin-date-picker[readonly]
Disabled: vaadin-date-picker[disabled]
Not empty: vaadin-date-picker[has-value]
With open overlay: vaadin-date-picker[opened]
Hovered: vaadin-date-picker:hover

Field

Field surface (background, border): vaadin-date-picker::part(input-field)
Native input element: vaadin-date-picker > input
Input field with placeholder shown: vaadin-date-picker > input:placeholder-shown
Toggle Button: vaadin-date-picker::part(toggle-button)
Toggle Button icon: vaadin-date-picker::part(toggle-button)::before
Clear button: vaadin-date-picker::part(clear-button)
Clear button icon: vaadin-date-picker::part(clear-button)::before
Prefix element: vaadin-date-picker > [slot="prefix"]

Label

Field with label: vaadin-date-picker[has-label]
Label: vaadin-date-picker::part(label)
Label text: vaadin-date-picker > label
Required indicator: vaadin-date-picker::part(required-indicator)

Helper and Validation Error

Field with helper: vaadin-date-picker[has-helper]
Helper: vaadin-date-picker::part(helper-text)
Helper text: vaadin-date-picker > [slot="helper"]
Invalid field: vaadin-date-picker[invalid]
Error message: vaadin-date-picker::part(error-message)
Error message text: vaadin-date-picker > [slot="error-message"]

Overlay

Overlay element: vaadin-date-picker-overlay
Overlay background: vaadin-date-picker-overlay::part(overlay)
Overlay content wrapper: vaadin-date-picker-overlay-content
Overlay toolbar: vaadin-date-picker-overlay-content::part(toolbar)
Desktop (large viewport) mode: vaadin-date-picker-overlay-content[desktop]
Fullscreen (small viewport) mode: vaadin-date-picker-overlay-content[fullscreen]
All overlay buttons: vaadin-date-picker-overlay-content > vaadin-button
Today button: vaadin-date-picker-overlay [slot="today-button"]
Cancel button: vaadin-date-picker-overlay [slot="cancel-button"]

Years

Years visible: vaadin-date-picker-overlay-content[years-visible]
Year scroller: vaadin-date-picker-year-scroller
Year element: vaadin-date-picker-year
Year number: vaadin-date-picker-year::part(year-number)
Year separator: vaadin-date-picker-year::part(year-separator)
Year separator symbol: vaadin-date-picker-year::part(year-separator)::after

Material Theme

The following parts are only visible with the Material theme:

Overlay header: vaadin-date-picker-overlay-content::part(overlay-header)
Overlay label: vaadin-date-picker-overlay-content::part(label)
Clear button: vaadin-date-picker-overlay-content::part(clear-button)
Toggle button: vaadin-date-picker-overlay-content::part(toggle-button)
Years toggle button: vaadin-date-picker-overlay-content::part(years-toggle-button)

Month Calendar

Calendar element: vaadin-month-calendar
Week numbers enabled: vaadin-month-calendar[show-week-numbers]
Month header: vaadin-month-calendar::part(month-header)
Weekdays row: vaadin-month-calendar::part(weekdays)
Weekday: vaadin-month-calendar::part(weekday)
Week number: vaadin-month-calendar::part(week-number)

Date Cells

Date: vaadin-month-calendar::part(date)
Disabled date: vaadin-month-calendar::part(disabled date)
Focused date: vaadin-month-calendar::part(focused date)
Selected date: vaadin-month-calendar::part(selected date)
Today’s date: vaadin-month-calendar::part(today date)
Focused date: vaadin-month-calendar::part(date focused)
Hovered date: vaadin-month-calendar::part(date):hover

Documentation