Docked Popover

Name: timepicker-ui
Author: Piotr Glejzer

Open the calendar as a popover anchored to the input with @pglejzer/datepicker-ui.

Docked

ui.displayMode: "docked" always opens the popover under the input, also on small windows. The default "auto" picks a modal below 600 px wide or 480 px tall.

Docked

Date

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

With a Today button

#

ui.todayButton adds a Today button to the footer. Its text comes from labels.today.

Today button

Date

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/index.css";
3
4new DatepickerUI("#date", {
5  ui: { displayMode: "docked", todayButton: true },
6}).create();

Docs: Display Modes · Options