Date Picker with React, Vue, Svelte and Angular

Importing the package does not touch window or document, so it is safe on the server. The constructor needs a document and throws without one, so create the picker on the client after the input is mounted, and call destroy() on unmount.

Every framework follows the same pattern: wait until the input exists, create the picker, and destroy it when the component goes away.

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      calendar: { minDate: "today" },
14    });
15    picker.create();
16    return () => picker.destroy();
17  }, []);
18
19  return <input ref={inputRef} />;
20}

Pages and layouts are Server Components by default. Put the picker in a file that starts with "use client", as in the React tab, and render it from the page:

1import { DateField } from "./date-field";
2
3export default function Page() {
4  return (
5    <form>
6      <DateField />
7    </form>
8  );
9}

Options that contain functions, such as isDateDisabled or callbacks, have to be defined inside the client component. A server component cannot pass functions to a client component.

The UMD build exposes the class itself as the global DatepickerUI. jsDelivr serves the same files from https://cdn.jsdelivr.net/npm/@pglejzer/datepicker-ui/dist/.

• Quick start
• Installation
• Display modes
• Methods reference