Date Picker
- Usage
- Styling
CSS Selectors
The following CSS selectors can be used in stylesheets to target the various parts and states of the component.
- 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