timepicker-ui
4.6.0GitHub
timepicker-ui
GitHub4.6.0
Features / Start View

Start View

Open the picker on the year list, which suits a birthday field. This page documents @pglejzer/datepicker-ui, the companion of timepicker-ui.

Docked popover

#

ui.startView is the first panel shown when the picker opens: "day", "month" or "year". Here the docked popover opens on the year list, and maxDate stops the list at the current year.

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


new DatepickerUI("#birthday", {
  calendar: { maxDate: "today" },
  ui: { startView: "year", displayMode: "docked" },
}).create();
#

The modal shows the year grid instead of the list.

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


new DatepickerUI("#birthday", {
  calendar: { maxDate: "today" },
  ui: { startView: "year", displayMode: "modal" },
}).create();

Note

startView is ignored in range mode, when calendar.precision is not "day", and when ui.initialView is "input".
Esc