timepicker-ui
4.6.0GitHub
timepicker-ui
GitHub4.6.0
Features / Month Picker

Month Picker

Pick a month instead of a day. This page documents @pglejzer/datepicker-ui, the companion of timepicker-ui.

Month precision

#

Set calendar.precision to "month". The picker shows a list of months, and a pick selects the whole month. The value is the first day of the month, and DateValue.value is YYYY-MM.

Month precision
import DatepickerUI from "@pglejzer/datepicker-ui";
import "@pglejzer/datepicker-ui/index.css";


new DatepickerUI("#date", {
  calendar: { precision: "month" },
}).create();

Month format

#

With month precision, ui.format may leave out the day. "MM/yyyy" and "yyyy-MM" both work, and typing in that format is parsed back.

Month format
import DatepickerUI from "@pglejzer/datepicker-ui";
import "@pglejzer/datepicker-ui/index.css";


new DatepickerUI("#date", {
  calendar: { precision: "month" },
  ui: { format: "MM/yyyy" },
}).create();

Note

precision is only used in single mode. Other modes report an invalid-option error and use "day".
Esc