CSS Classes

The dp-ui classes @pglejzer/datepicker-ui renders, the companion of timepicker-ui, and the attributes it sets.

The picker uses the block dp-ui with BEM elements and modifiers. Change colors, sizes and shapes with the CSS variables first, and target these classes for what the variables do not cover.

Host and surface

#

The host wraps your input. The surface is the picker itself: the <dialog> for a modal and the .dp-ui__container element otherwise.

Class	Element
`dp-ui`	Host element around the input.
`dp-ui--error`	Host while the typed text is invalid.
`dp-ui__container`	Surface root.
`dp-ui__container--docked` `dp-ui__container--modal` `dp-ui__container--inline`	Surface kind.
`dp-ui__container--range` `dp-ui__container--fullscreen`	Range picker, and its full-screen form.
`dp-ui__container--menu-open` `dp-ui__container--input` `dp-ui__container--morphing` `dp-ui__container--rtl`	Month or year menu open, input view, view change in progress, right-to-left.
`dp-ui__dialog`	The `<dialog>` of a modal picker.

Header and navigation

#

Class	Element
`dp-ui__header` `dp-ui__header--docked` `dp-ui__header--modal` `dp-ui__header--range`	Header.
`dp-ui__supporting-text` `dp-ui__headline`	Header texts.
`dp-ui__navigation` `dp-ui__navigation-group`	Month and year controls.
`dp-ui__navigation--year-grid`	Navigation while the year grid is shown.
`dp-ui__icon-button` `dp-ui__menu-button` `dp-ui__text-button`	Buttons, with a modifier for each one such as `--prev-month`, `--next-month`, `--switch-view`, `--close`, `--today`, `--clear`, `--cancel`, `--confirm` and `--save`.

Calendar and days

#

Class	Element
`dp-ui__calendar` `dp-ui__content`	Calendar body.
`dp-ui__pager` `dp-ui__pager--swipe` `dp-ui__pager--dragging` `dp-ui__pager-track` `dp-ui__page`	Month paging.
`dp-ui__weekdays` `dp-ui__weekday` `dp-ui__week-number-header`	Weekday row.
`dp-ui__month-grid` `dp-ui__week` `dp-ui__week-number`	Day table, rows and week numbers.
`dp-ui__date` `dp-ui__date--selected` `dp-ui__date--today` `dp-ui__date--disabled` `dp-ui__date--outside-month` `dp-ui__date--empty` `dp-ui__date--range-start` `dp-ui__date--range-end` `dp-ui__date--in-range`	Day cell and its states.
`dp-ui__date-indicator` `dp-ui__date-badge`	Day circle, and the badge dot from `calendar.decorateDate`.
`dp-ui__date-content` `dp-ui__date--has-content`	Text or node from `calendar.renderDate`, and the cell that has it.

Several months, presets and range

#

Class	Element
`dp-ui__container--multi-month` `dp-ui__months` `dp-ui__navigation--months`	Several months: the container (with `--dp-ui-visible-months` set inline), a page of months, and the range arrows row.
`dp-ui__presets` `dp-ui__preset` `dp-ui__container--presets`	Range presets, and the container when they show as a column.
`dp-ui__range` `dp-ui__weekdays-bar` `dp-ui__month-list` `dp-ui__month-subhead`	Range calendar.
`dp-ui__input--active`	Page input that the next pick fills, with `ui.endInput`. Added to your input and not styled by the picker.

Menus and grids

#

Class	Element
`dp-ui__menu` `dp-ui__menu--month` `dp-ui__menu--year` `dp-ui__menu-item` `dp-ui__menu-item--selected`	Month and year menus.
`dp-ui__month-selection` `dp-ui__month-selection-item` `dp-ui__month-selection-item--selected` `dp-ui__month-selection-item--current`	Month grid, for month precision and `startView: "month"` in a modal.
`dp-ui__year-selection` `dp-ui__year-selection-item` `dp-ui__year-selection-item--selected` `dp-ui__year-selection-item--current`	Year grid.

#

Class	Element
`dp-ui__input-panel` `dp-ui__text-field` `dp-ui__text-field-input` `dp-ui__text-field-label` `dp-ui__text-field-supporting` `dp-ui__text-field--error`	Input view.
`dp-ui__actions` `dp-ui__actions-start` `dp-ui__actions-end`	Footer.
`dp-ui__live-region` `dp-ui__visually-hidden`	Screen reader announcements and hidden text.
`dp-ui__form-value`	The hidden form input.

Data attributes

#

The theme and the color scheme are attributes, not classes. A docked picker also carries two attributes for its position.

Attribute	Set on
`data-theme="<name>"`	The theme name, written on the host and on the surface root.
`data-color-scheme="light" \| "dark"`	The color scheme, written on the host and on the surface root.
`data-positioning="anchor" \| "fallback"`	On a docked picker. `anchor` is CSS anchor positioning and `fallback` is the JavaScript placement.
`data-placement`	On a docked picker. The placement of the popover.

Writing selectors

#

ui.cssClass adds your own class to the surface root. Start a selector with it to style one picker without touching the others. Load your stylesheet after the picker CSS so it wins a tie.

index.ts

new DatepickerUI("#date", { ui: { cssClass: "brand" } }).create();

index.css

1.brand .dp-ui__date--today {
2  font-style: italic;
3}
4
5.dp-ui__input--active {
6  border-color: #6750a4;
7  box-shadow: inset 0 0 0 1px #6750a4;
8}
9
10[data-theme="crane"] .dp-ui__date--selected {
11  border-radius: 4px;
12}

dp-ui__input--active is added to your own input, and the picker leaves its styling to you. Custom themes are covered on Themes.