Installation

The package has no dependencies. Install it with the package manager your project uses:

npm

npm install @pglejzer/datepicker-uiCopy

yarn

yarn add @pglejzer/datepicker-uiCopy

pnpm

pnpm add @pglejzer/datepicker-uiCopy

The picker needs its stylesheet. Import index.css to get every theme, or main.css plus the theme files you use.

The theme files are:

• theme-m3-green.css
• theme-crane.css
• theme-crane-straight.css
• theme-m2.css
• theme-glassmorphic.css
• theme-pastel.css
• theme-ai.css
• theme-cyberpunk.css
• theme-blueprint.css

1import "@pglejzer/datepicker-ui/main.css";
2import "@pglejzer/datepicker-ui/theme-m2.css";

Set ui.theme to the matching name, for example "m2". See Themes for the color scheme and custom themes.

The UMD build exposes the class itself as the global DatepickerUI. From unpkg:

1<link
2  rel="stylesheet"
3  href="https://unpkg.com/@pglejzer/datepicker-ui/dist/css/index.css"
4/>
5<script src="https://unpkg.com/@pglejzer/datepicker-ui/dist/umd/index.js"></script>
6<script>
7  new DatepickerUI("#date").create();
8</script>

jsDelivr serves the same files:

1<link
2  rel="stylesheet"
3  href="https://cdn.jsdelivr.net/npm/@pglejzer/datepicker-ui/dist/css/index.css"
4/>
5<script src="https://cdn.jsdelivr.net/npm/@pglejzer/datepicker-ui/dist/umd/index.js"></script>

Types ship in the package, so there is nothing else to install. DatepickerUI is the default export and also a named export, and every option, value and event payload has an exported type.

1import DatepickerUI, {
2  type DatepickerOptions,
3  type PickerValue,
4} from "@pglejzer/datepicker-ui";
5
6const options: DatepickerOptions = {
7  calendar: { mode: "range" },
8};
9
10const picker = new DatepickerUI("#date", options);
11picker.create();
12
13const value: PickerValue | null = picker.getValue();

The full list is on the TypeScript page.

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