Date Picker Display Modes

ui.displayMode picks the surface. The default is "auto".

A docked picker is a popover placed next to the input. It uses CSS anchor positioning where the browser supports it, and a JavaScript fallback otherwise.

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

A modal picker is a native <dialog> with a backdrop. It is the surface "auto" picks on small screens.

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

For an inline picker, set ui.inline.enabled and give ui.inline.container a selector or an element. create() mounts it. It has no open triggers.

1<input id="date" />
2<div id="calendar"></div>

An inline picker hides the footer unless ui.footer is true. Without a footer there is no confirm button, so set behavior.commitOnChange to write each pick to the input. The same applies to behavior.closeOnSelect.

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/index.css";
3
4new DatepickerUI("#date", {
5  ui: { inline: { enabled: true, container: "#calendar" } },
6  behavior: { commitOnChange: true },
7}).create();

A range picker in a modal opens full screen below ui.fullscreen. true means below 600 px, a number means below that width in pixels and false means never. The width is read when the picker opens.

1new DatepickerUI("#range", {
2  calendar: { mode: "range" },
3  ui: { displayMode: "modal", fullscreen: 768 },
4}).create();

ui.appendTo takes a selector or an element for the modal dialog. By default the dialog is appended to the host.

1new DatepickerUI("#date", {
2  ui: { displayMode: "modal", appendTo: "#modal-root" },
3}).create();

ui.toggleButton adds an extra element that opens the picker, such as a calendar icon button. When it is not a <button>, Enter and Space open the picker. The picker sets aria-expanded on it and gives it an accessible name from labels.openCalendar.

1<input id="date" />
2<button id="open" type="button">Choose date</button>

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

A modal picker locks page scroll while it is open. Set ui.allowPageScroll to true to keep the page scrollable.

• Docked popover example
• Modal dialog example
• Inline calendar example
• Toggle button example
• Options reference