Date Picker Custom Styling

The picker is plain CSS. Colors, sizes, corners and type come from --dp-ui-* custom properties, and every part has a dp-ui__* class. ui.cssClass adds your own class to the surface root, so you can set variables or write rules for one picker.

The system tokens follow the Material Design 3 roles and are set with light-dark(). Component tokens derive from them, so changing --dp-ui-sys-color-primary also recolors the selected day, the today outline, the focus ring and the text buttons.

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/main.css";
3import "./guide.css";
4
5new DatepickerUI("#date", { ui: { cssClass: "guide" } }).create();

1.guide {
2  --dp-ui-sys-color-primary: light-dark(#0b6b3a, #7fdba0);
3  --dp-ui-sys-color-on-primary: light-dark(#ffffff, #00391c);
4  --dp-ui-container-shape-docked: 8px;
5}

Start with tokens. They survive library updates better than selectors, and they follow light and dark for free when you write them with light-dark(). A component token set on your class wins over the value derived from a system token:

1.brand {
2  --dp-ui-sys-color-primary: #a04000;
3  --dp-ui-sys-color-on-primary: #ffffff;
4}
5
6.brand {
7  --dp-ui-date-selected-container-color: #7a2e00;
8}

Use a class rule only for a property with no token. Write the selector with your class first, so it is more specific than the library rule:

1.brand .dp-ui__date-indicator {
2  border-radius: 12px;
3}
4
5.brand .dp-ui__text-button--confirm {
6  text-transform: uppercase;
7}

The full lists are on the CSS Variables and CSS Classes pages.

The picker declares every token again on the host, on the modal <dialog> and on each docked or inline container. A value set higher up is replaced by the default on those elements:

1:root,
2.dp-ui {
3  --dp-ui-sys-color-primary: #a04000;
4}

A class only reaches the pickers that receive it. Give each picker its own name and the rules stay apart:

1new DatepickerUI("#start", { ui: { cssClass: "brand" } }).create();
2new DatepickerUI("#end", { ui: { cssClass: "plain" } }).create();

To limit a class to one part of the page, put an ancestor selector in front of it:

1.checkout :is(.dp-ui__container, .dp-ui__dialog).brand {
2  --dp-ui-sys-color-primary: #a04000;
3}

This needs the picker inside that ancestor. A docked popover stays where the host is in the DOM. The modal dialog is appended to the host unless you set ui.appendTo, so with appendTo: document.body an ancestor selector no longer matches and the class alone has to carry the rules.

A docked or inline picker is a .dp-ui__container. A modal is a <dialog class="dp-ui__dialog">, and the container sits inside it. ui.cssClass lands on whichever one is the root. Name both in the selector, so one rule works in every display mode:

1:is(.dp-ui__container, .dp-ui__dialog).brand {
2  --dp-ui-sys-color-primary: #a04000;
3  --dp-ui-sys-color-on-primary: #ffffff;
4}

Inside a CSS Module, a bare :global(.brand) fails the purity check. Keep one local class in the selector, for example .scope :global(:is(.dp-ui__container, .dp-ui__dialog).brand).

The system colors use light-dark(), which reads the color-scheme of the element. The picker sets it from ui.colorScheme, and "auto" detects it when the picker opens. Write each color as a pair and your style follows the scheme:

1.brand {
2  --dp-ui-sys-color-primary: light-dark(#a04000, #ffb68a);
3  --dp-ui-sys-color-on-primary: light-dark(#ffffff, #4f2300);
4}

If your design has one fixed look, force the scheme and use plain values. The scheme then also decides the native parts of the page, such as scrollbars:

1new DatepickerUI("#date", {
2  ui: { cssClass: "brand", colorScheme: "dark" },
3}).create();

See Color scheme for how auto picks.

main.css holds the core and the basic theme. It is the smallest base and the best choice for a fully custom look:

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/main.css";
3import "./brand.css";
4
5new DatepickerUI("#date", { ui: { cssClass: "brand" } }).create();

To adjust a built-in theme instead, load its file and add your class with ui.cssClass. A theme sets its values on [data-theme], which is more specific than a bare class. Add [data-theme] to your selector so your values win:

1:is(.dp-ui__container, .dp-ui__dialog).brand[data-theme] {
2  --dp-ui-sys-color-primary: #a04000;
3  --dp-ui-container-shape-docked: 8px;
4}

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/theme-crane.css";
3import "@pglejzer/datepicker-ui/main.css";
4import "./brand.css";
5
6new DatepickerUI("#date", {
7  ui: { theme: "crane", cssClass: "brand" },
8}).create();

Only basic and blueprint follow ui.colorScheme. The other themes keep their own scheme, so a light-dark() pair will resolve to one side. See the Themes page for the list.

• Date picker themes
• CSS variables
• CSS classes
• Custom styling example
• Custom theme example