Docs

Documentation versions (currently viewingVaadin 24)

Date Picker

Styling API reference for the Date Picker component.

Style Properties

The following style properties can be used in CSS stylesheets to customize the appearance of this component.

To apply values to these properties globally in your application UI, place them in a CSS block using the html {…​} selector. See Lumo Style Properties for more information on style properties.

Note
Input Field Components Shared Styles
Style properties whose names start with --vaadin-input-field are shared among all input field components. To apply them only to a specific type of component, use an element selector like vaadin-text-field {…​}

Field Surface

Feature Property Default Value

Background

--vaadin-input-field-background

--lumo-contrast-10pct

Background, invalid

--vaadin-input-field-invalid-background

--lumo-error-color-10pct

Background, hover highlight color

--vaadin-input-field-hover-highlight

--lumo-contrast-50pct

Background, invalid hover highlight color

--vaadin-input-field-invalid-hover-highlight

--lumo-error-color-50pct

Background, disabled

--vaadin-input-field-disabled-background

--lumo-contrast-5pct

Border width

--vaadin-input-field-border-width

0

Border color

--vaadin-input-field-border-color

--lumo-contrast-50pct

Hover highlight opacity

--vaadin-input-field-hover-highlight-opacity

0.1

Height

--vaadin-input-field-height

--lumo-size-m

Value text color

--vaadin-input-field-value-color

--lumo-body-text-color

Value text color, disabled

--vaadin-input-field-disabled-value-color

--lumo-disabled-text-color

Value font size

--vaadin-input-field-value-font-size

--lumo-font-size-m

Value font weight

--vaadin-input-field-value-font-weight

400

Placeholder text color

--vaadin-input-field-placeholder-color

--lumo-secondary-text-color

Border radius

--vaadin-input-field-border-radius

--lumo-border-radius-m

Read-only border

--vaadin-input-field-readonly-border

1px dashed --lumo-contrast-30pct

Label

Feature Property Default Value

Color

--vaadin-input-field-label-color

--lumo-secondary-text-color

Focused color

--vaadin-input-field-focused-label-color

--lumo-primary-text-color

Hovered color

--vaadin-input-field-hovered-label-color

--lumo-body-text-color

Font size

--vaadin-input-field-label-font-size

--lumo-font-size-s

Font weight

--vaadin-input-field-label-font-weight

500

Helper

Feature Property Default Value

Font size

--vaadin-input-field-helper-font-size

--lumo-font-size-xs

Font weight

--vaadin-input-field-helper-font-weight

400

Color

--vaadin-input-field-helper-color

--lumo-secondary-text-color

Top margin

--vaadin-input-field-helper-spacing

0.4em

Error Message

Feature Property Default Value

Font size

--vaadin-input-field-error-font-size

--lumo-font-size-xs

Font weight

--vaadin-input-field-error-font-weight

400

Color

--vaadin-input-field-error-color

--lumo-error-text-color

Icons

Feature Property Default Value

Font size

--vaadin-input-field-icon-font-size

--lumo-icon-size-m

Color

--vaadin-input-field-icon-color

--lumo-contrast-60pct

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"]

Read-only border

vaadin-date-picker::part(input-field)::after

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)

Past date

vaadin-month-calendar::part(past date)

Future date

vaadin-month-calendar::part(future date)

Focused date

vaadin-month-calendar::part(date focused)

Hovered date

vaadin-month-calendar::part(date):hover