timepicker-ui
4.6.0GitHub
timepicker-ui
GitHub4.6.0
Features / Several Months

Several Months

Show more than one month side by side. This page documents @pglejzer/datepicker-ui, the companion of timepicker-ui.

Two months

#

calendar.months sets how many months are shown. The docked and inline pickers show as many as fit the width, up to that number. The width is read when the picker opens. Use the Inline switch for a wider view.

Two months
import DatepickerUI from "@pglejzer/datepicker-ui";
import "@pglejzer/datepicker-ui/index.css";


new DatepickerUI("#date", {
  calendar: { months: 2 },
}).create();

Three months, paged by month

#

calendar.pageBy sets how far the arrows move. The default "view" moves by as many months as are shown, and "month" moves one month at a time.

Three months
import DatepickerUI from "@pglejzer/datepicker-ui";
import "@pglejzer/datepicker-ui/index.css";


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

Range with two months

#

Several months suit a range, because both ends are often in different months.

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


new DatepickerUI("#date", {
  calendar: { mode: "range", months: 2 },
}).create();

Note

A modal picker always shows one month, and a range picker in a modal keeps its vertical month list.
Esc