Decorated Dates

Name: timepicker-ui
Author: Piotr Glejzer

Mark days with a badge, a class or an accessible label. This page documents @pglejzer/datepicker-ui, the companion of timepicker-ui.

Badges with labels

#

calendar.decorateDate receives each day as a Date and returns a DateDecoration or undefined. badge: true draws a small dot, label is appended to the accessible name of the day, and className adds a class to the day cell. Here the 1st and the 15th of every month get a badge.

Badges

Date

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/index.css";
3
4new DatepickerUI("#date", {
5  calendar: {
6    decorateDate: (date) => {
7      if (date.getDate() === 1) return { badge: true, label: "Billing day" };
8      if (date.getDate() === 15) return { badge: true, label: "Payday" };
9      return undefined;
10    },
11  },
12}).create();