Skip to main content Skip to docs navigation

CSS Classes

The picker uses the following css classes to style the picker.

widget

The outer element for the widget.

calendarHeader

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.

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 most element for the calendar view.

decadesContainer

The outer most element for the decades view.

decade

Applied to elements within the decades container, e.g. 2020, 2030

yearsContainer

The outer most element for the years view.

year

Applied to elements within the years container, e.g. 2021, 2021

monthsContainer

The outer most element for the month view.

month

Applied to elements within the month container, e.g. January, February

daysContainer

The outer most 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 most element for all time related elements.

separator

Applied the separator columns between time elements, e.g. hour *:* minute *:* second

clockContainer

The outer most element for the clock view.

hourContainer

The outer most element for the hours selection view.

minuteContainer

The outer most element for the minutes selection view.

secondContainer

The outer most 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.

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.