Typed Input and Mask

Let users type a date and format it as they go. This page documents @pglejzer/datepicker-ui, the companion of timepicker-ui.

Format and mask

#

ui.format is a pattern built from d dd M MM yy yyyy and one separator: /, ., - or a space. ui.mask adds the separators while the user types digits, so typing 14032025 gives 14.03.2025.

Mask

Date

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/index.css";
3
4new DatepickerUI("#date", {
5  ui: { format: "dd.MM.yyyy", mask: true },
6}).create();

Note

The mask works in single mode and in the two range fields at day precision. A typed date that is not a date or is not available shows a message from labels.invalidDate or labels.unavailableDate.

#

The modal can show a text field instead of the calendar. ui.initialView: "input" opens it on the field, and ui.viewSwitch keeps the button that switches between the two views.

Input view

Date

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/index.css";
3
4new DatepickerUI("#date", {
5  ui: { displayMode: "modal", initialView: "input", viewSwitch: true },
6}).create();

Format and mask

Text input view in a modal