The picker uses the following css classes to style the picker.
The outer element for the widget.
The element for the calendar view header, next and previous actions.
switch
The element for the action to change the calendar view. E.g. month -> year.
The elements for all the toolbar options.
switch
Disables the hover and rounding affect.
sideBySide
Applied to the widget element when the side by side option is in use.
previous
The element for the action to change the calendar view, e.g. August -> July
next
The element for the action to change the calendar view, e.g. August -> September
disabled
Applied to any action that would violate any restriction options. ALso applied to an input field if the disabled
function is called.
old
Applied to any date that is less than requested view, e.g. the last day of the previous month.
new
Applied to any date that is greater than of requested view, e.g. the last day of the previous month.
active
Applied to any date that is currently selected.
dateContainer
The outer element for the calendar view.
decadesContainer
The outer element for the decades view.
decade
Applied to elements within the decades container, e.g. 2020, 2030
yearsContainer
The outer element for the years view.
year
Applied to elements within the years container, e.g. 2021, 2021
monthsContainer
The outer element for the month view.
month
Applied to elements within the month container, e.g. January, February
daysContainer
The outer element for the calendar view.
day
Applied to elements within the day container, e.g. 1, 2..31
calendarWeeks
If display.calendarWeeks is enabled, a column displaying the week of year is shown. This class is applied to each
cell in that column.
dayOfTheWeek
Applied to the first row of the calendar view, e.g. Sunday, Monday
today
Applied to the current date on the calendar view.
weekend
Applied to the locale's weekend dates on the calendar view, e.g. Sunday, Saturday
timeContainer
The outer element for all time related elements.
separator
Applied the separator columns between time elements, e.g. hour *:* minute *:* second
clockContainer
The outer element for the clock view.
hourContainer
The outer element for the hours selection view.
minuteContainer
The outer element for the minutes selection view.
secondContainer
The outer element for the seconds selection view.
hour
Applied to each element in the hours selection view.
minute
Applied to each element in the minutes selection view.
second
Applied to each element in the seconds selection view.
second
Applied AM/PM toggle button.
show
Applied the element of the current view mode, e.g. calendar or clock.
collapsing
Applied to the currently showing view mode during a transition between calendar and clock views
collapse
Applied to the currently hidden view mode.
inline
Applied to the widget when the option display.inline is enabled.
lightTheme
Applied to the widget when the option display.theme is light.
darkTheme
Applied to the widget when the option display.theme is dark.
isDarkPreferredQuery
Used for detecting if the system color preference is dark mode.