Quick Start

Add a text input to the page:

<input id="date" />

Import the class and the stylesheet, create the picker and call create():

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/index.css";
3
4const picker = new DatepickerUI("#date", {
5  ui: { theme: "m3-green" },
6  callbacks: {
7    onConfirm: ({ value }) => console.log(value),
8  },
9});
10
11picker.create();

The options argument is optional. The first argument is a selector, an <input> or an element that contains an <input>. A bare <input> is wrapped in a div.dp-ui host. For any other element, the parent of the input becomes the host. The constructor throws when no input is found.

Options come in five groups. Every option is optional. A value of the wrong type or an unknown choice falls back to the default and emits an error event with the code invalid-option.

calendar

Which days exist and what the user selects: mode, minDate, maxDate, disabled dates, locale, weekStart, months and precision.

ui

Presentation: displayMode, inline, format, theme, colorScheme and the footer buttons.

labels

Every button text and accessible name. Month and weekday names come from Intl.

behavior

Interaction rules: closeOnSelect, commitOnChange, returnFocus and the instance id.

callbacks

One on* function per event, such as onConfirm and onOpen.

All of them are listed on the Options page. This demo sets one option from four of the groups:

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/index.css";
3
4new DatepickerUI("#date", {
5  calendar: { weekStart: "monday" },
6  ui: { todayButton: true, clearButton: true },
7  labels: { today: "Go to today" },
8  behavior: { closeOnSelect: true },
9}).create();

Create the picker on the client after the input is mounted, and call destroy() when the component unmounts:

1"use client";
2
3import { useEffect, useRef } from "react";
4import DatepickerUI from "@pglejzer/datepicker-ui";
5import "@pglejzer/datepicker-ui/index.css";
6
7export function DateField() {
8  const inputRef = useRef<HTMLInputElement>(null);
9
10  useEffect(() => {
11    if (!inputRef.current) return;
12    const picker = new DatepickerUI(inputRef.current);
13    picker.create();
14    return () => picker.destroy();
15  }, []);
16
17  return <input ref={inputRef} />;
18}

More on server rendering and each framework in Frameworks and SSR.