Validation

calendar.validate runs on the presented value (null when empty) after setValue(), typed input and every commit. Return a message to mark the input invalid, or null, undefined or an empty string when the value is fine. It never blocks a pick or a commit.

A message sets aria-invalid on the input and emits an error event with the code invalid-value. The demo shows it under the field, wired to the input with aria-describedby. Pick a Saturday or a Sunday and confirm to see it.

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/index.css";
3
4const message = document.querySelector("#date-message");
5
6new DatepickerUI("#date", {
7  calendar: {
8    validate: (value) => {
9      if (value === null || !("date" in value)) return null;
10      const day = value.date.getDay();
11      return day === 0 || day === 6 ? "Pick a weekday" : null;
12    },
13  },
14  callbacks: {
15    onError: ({ message: text }) => {
16      message.textContent = text;
17    },
18    onConfirm: ({ value }) => {
19      message.textContent = value && "date" in value && [0, 6].includes(value.date.getDay())
20        ? "Pick a weekday"
21        : "";
22    },
23  },
24}).create();

Typed text that is not a date, or a date outside minDate and maxDate, emits error with the code invalid-date or unavailable-date. The default messages are labels.invalidDate and labels.unavailableDate. The same onError callback receives them, so the message above covers those cases too.