Modal Dialog

Show the calendar in a modal dialog with @pglejzer/datepicker-ui.

ui.displayMode: "modal" opens a dialog with a headline, the calendar and the Cancel and OK buttons. Nothing is written to the input until the user confirms. The modal always shows one month.

Modal

Date

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

Start on the text input view

#

ui.initialView: "input" opens the modal on the text field instead of the grid. A button switches between the two views, and ui.viewSwitch controls it.

Input view

Date

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

Docs: Display Modes · Typed Input