Per-day Content

Show a price or any text under the day number. This page documents @pglejzer/datepicker-ui, the companion of timepicker-ui.

Prices on weekdays

#

calendar.renderDate returns a string, a DOM node, or null for no content. A string is always text, never HTML. The text is added to the accessible name of the day. Here every weekday shows a price.

renderDate only draws the cell, so call the same function in onConfirm to read the price of the picked date.

Single

Date

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/index.css";
3
4const price = (date) =>
5  date.getDay() === 0 || date.getDay() === 6
6    ? null
7    : `$${80 + ((date.getDate() * 7) % 90)}`;
8
9const result = document.querySelector("#price");
10
11new DatepickerUI("#date", {
12  calendar: { renderDate: price },
13  callbacks: {
14    onConfirm: ({ value }) => {
15      if (value && "date" in value) {
16        result.textContent = `${value.formatted} · ${price(value.date) ?? "no price"}`;
17      }
18    },
19  },
20}).create();

In a range picker

#

The same function works in range mode.

Range

Dates

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/index.css";
3
4const price = (date) =>
5  date.getDay() === 0 || date.getDay() === 6
6    ? null
7    : `$${80 + ((date.getDate() * 7) % 90)}`;
8
9new DatepickerUI("#date", {
10  calendar: { mode: "range", renderDate: price },
11}).create();

Note

Cells with content are taller, so the calendar grows. Keep the text short, such as a price or a count.