Getting Started

Two small date picker examples built with @pglejzer/datepicker-ui, the companion of timepicker-ui.

Default picker

Pass a selector and call create(). A bare <input> is wrapped in a div.dp-ui host. With no options the picker selects a single date and opens as a docked popover, or as a modal on small windows.

Default

Date

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/index.css";
3
4new DatepickerUI("#date").create();

Read the confirmed value

#

callbacks.onConfirm receives { value, autoCommit }. In single mode value.value is the ISO date YYYY-MM-DD, whatever format the input shows. value is null when the field was cleared.

onConfirm

Date

Nothing confirmed yet

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/index.css";
3
4const output = document.querySelector("#confirmed");
5
6new DatepickerUI("#date", {
7  callbacks: {
8    onConfirm: ({ value }) => {
9      output.textContent = value && "value" in value ? value.value : "";
10    },
11  },
12}).create();

Docs: Quick Start · Events · Options