datepicker-ui

@pglejzer/datepicker-ui is a zero-dependency, framework-agnostic date picker written in TypeScript and safe to import during server rendering. It is the companion of timepicker-ui: the same architecture, theme names shared with the time picker, and an options object split into groups. These pages document version 1.0.0.

Features

• Docked popover, modal dialog and inline display
• Single date, date range and multiple dates
• Typed input with an opt-in mask, and a switch between the calendar and the input view
• Month and year selection, plus drag and wheel paging between months
• Several months side by side, range presets, and a range in two page inputs
• Month-only and year-only pickers
• Per-day content such as prices, and field validation with your own rules
• Keyboard and screen reader support, with every text available as a label
• Ten themes, with light and dark detection
• RTL and any Intl locale, with day, week and year numbers in the locale's digits
• Form integration through a hidden ISO value
• No dependencies

Try it

The demo uses the quick start options with the m3-green theme. Pick another theme from the menu, or switch the preview to an inline calendar.

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

Links

npm package

@pglejzer/datepicker-ui on the npm registry

GitHub repository

Source code and issues

Examples

Live demos with the code next to them

Next steps

Installation

Install the package from npm or load it from a CDN

Quick Start

Create your first picker and learn the five option groups

Guides

Display modes, selection modes, typed input, themes and localization

API reference

Every option, method, event, CSS class and CSS variable

Examples

Ranges, constraints, month and year pickers, themes and more

Date and Time

Use datepicker-ui and timepicker-ui together for a date and a time