Date and Time Picker

Pair a date field with a time field from timepicker-ui. This page documents @pglejzer/datepicker-ui, the companion of timepicker-ui.

One theme for both

#

The two libraries are separate and do not depend on each other. Both accept the same ten theme names in ui.theme, so one value styles the date and the time field alike. Use the select to switch both at once.

Date and time

Date

Time

Combined: nothing selected

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import { TimepickerUI } from "timepicker-ui";
3import "@pglejzer/datepicker-ui/index.css";
4import "timepicker-ui/index.css";
5
6const theme = "crane";
7
8new DatepickerUI("#date", { ui: { theme } }).create();
9new TimepickerUI("#time", { ui: { theme } }).create();

Note

Import timepicker-ui/index.css next to @pglejzer/datepicker-ui/index.css. Each library styles its own picker. The time field has two more themes of its own, dark and blueprint-dark.