Month and Year Pickers

calendar.precision is "day" (the default), "month" or "year". The picker then selects a whole month or year. It works in single mode only. Another mode emits invalid-option and uses "day".

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/index.css";
3
4new DatepickerUI("#month", {
5  calendar: { precision: "month" },
6}).create();

A docked month picker opens on the month grid and a modal one adds a year button above it. A month can be picked when any of its days is available.

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/index.css";
3
4new DatepickerUI("#year", {
5  calendar: { precision: "year" },
6}).create();

A year picker opens on the year grid. A year can be picked when it is inside minDate, maxDate and ui.yearRange.

The value is the first day of the period, and DateValue.value is YYYY-MM for months and YYYY for years. The input text drops the finer parts of the format, so MM/dd/yyyy shows 10/2026, and typing 10/2026 works. setValue() accepts a Date, "2026-10" or "2026-10-17".

With precision: "month" the ui.format pattern may leave out the day ("MM/yyyy", "yyyy-MM"), and with "year" it may be the year alone ("yyyy"). A full pattern works too: the parts finer than the precision are dropped, so "dd.MM.yyyy" shows 10.2026 for a month.

At these precisions select:day carries the picked period in value.value. There is no input view, and ui.mask and ui.startView do not apply.

ui.startView ("day", "month" or "year") decides which panel opens first. A docked picker opens the month or year menu, and a modal picker opens the month grid or year grid. It suits a birthday field.

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/index.css";
3
4new DatepickerUI("#birthday", {
5  ui: { startView: "year" },
6}).create();

• Month picker example
• Year picker example
• Start view example
• Typed input and format