Typed Date Input, Format and Mask

The user can type into the input. Text is parsed on blur and on Enter. A valid date updates the value and reformats the text. An empty input clears the value. Anything else sets aria-invalid and a custom validity message on the input, adds the class dp-ui--error to the host and emits error. The message comes from a label:

ui.format is "auto" or a pattern of three parts with one separator.

The separator is one of /, ., - or a space, used between all parts. With "auto", the order and separator come from Intl for calendar.locale, with two-digit day and month and a four-digit year. Any other string emits invalid-option and "auto" is used.

ui.mask formats digits as the user types, in single mode and in the two range fields, at day precision only. Typing 14032025 gives 14.03.2025 with the pattern below. A separator typed after one digit pads the group with a zero.

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

• Separators /, ., - and spaces are accepted when typing.
• A compact eight-digit form such as 14032025 and non-Latin digits are accepted.
• A two-digit year means 20xx up to 20 years ahead of the current year, and 19xx after that.
• In range mode the input holds two dates separated by an en dash, for example 14.03.2025 – 20.03.2025. A hyphen with spaces around it is also accepted when typing.
• In multiple mode dates are separated by commas.

calendar.validate checks the committed value with your own rule. It receives the value as getValue() returns it, or null when the field is empty. Return a message to mark the field invalid, or undefined or null when it is fine.

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/index.css";
3
4new DatepickerUI("#date", {
5  calendar: {
6    validate: (value) => {
7      if (!value || !("date" in value)) return null;
8      return value.date.getDay() % 6 === 0 ? "Weekdays only" : null;
9    },
10  },
11}).create();

It never blocks a pick or a commit. A message sets aria-invalid and a custom validity message on the input, adds dp-ui--error to the host and emits error with the code invalid-value. It runs after setValue(), typed input and a commit. A throw is rethrown asynchronously and counts as valid.

1new DatepickerUI("#date", {
2  calendar: { minDate: "2026-01-01", maxDate: "2026-12-31" },
3  labels: {
4    beforeMinDate: "Pick a date on or after {date}",
5    afterMaxDate: "Pick a date on or before {date}",
6  },
7}).create();

• Typed input and mask example
• Validation example
• Disabled dates and limits
• Localization
• Events and error codes