Inline Calendar

Render the calendar permanently inside a page container with @pglejzer/datepicker-ui.

Inline

ui.inline.enabled renders the calendar into ui.inline.container, a selector or an element, instead of opening it. The input still holds the value. An inline picker has no footer by default, so it commits only through behavior.commitOnChange or behavior.closeOnSelect.

index.html

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

Inline

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();

#

ui.footer: true shows the footer in inline mode. The user then confirms with the OK button and the picker commits nothing before that, so commitOnChange is not needed.

Inline footer

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

Docs: Display Modes · Layouts

Inline

With a footer