timepicker-ui
4.6.0GitHub
timepicker-ui
GitHub4.6.0
Guides / Disabled Dates

Disabled Dates and Date Limits

Decide which days @pglejzer/datepicker-ui, the companion of timepicker-ui, lets the user select. Six calendar options cover limits, lists, weekdays and a function.

Options

#
calendar options that decide which days can be selected
OptionTypeDescription
minDateDate | string | "today"Earliest selectable day. Strings are ISO YYYY-MM-DD.
maxDateDate | string | "today"Latest selectable day.
disabledDates(Date | string)[]Days that cannot be selected.
enabledDates(Date | string)[]When set, only these days can be selected.
disabledWeekdaysnumber[]Weekdays that cannot be selected. 0 is Sunday and 6 is Saturday.
isDateDisabled(date: Date) => booleanReturn true for a day that cannot be selected.

Future dates and weekdays

#

This demo disables every day before today and every Saturday and Sunday.

Future weekdays only
import DatepickerUI from "@pglejzer/datepicker-ui";
import "@pglejzer/datepicker-ui/index.css";


new DatepickerUI("#date", {
  calendar: { minDate: "today", disabledWeekdays: [0, 6] },
}).create();

minDate and maxDate

#

Both accept a Date, an ISO string or "today".

index.ts
new DatepickerUI("#date", {
  calendar: { minDate: "2026-01-01", maxDate: "today" },
}).create();

Lists of dates

#

disabledDates blocks single days. enabledDates works the other way round: when it is set, only those days can be selected.

index.ts
new DatepickerUI("#date", {
  calendar: {
    disabledDates: ["2026-12-25", new Date(2026, 11, 26)],
  },
}).create();


new DatepickerUI("#launch", {
  calendar: {
    enabledDates: ["2026-11-02", "2026-11-09", "2026-11-16"],
  },
}).create();

A function

#

isDateDisabled runs for each day. An error thrown inside is rethrown asynchronously and the day counts as enabled.

index.ts
new DatepickerUI("#date", {
  calendar: {
    isDateDisabled: (date) => date.getDate() === 13,
  },
}).create();

Functions and server components

Functions cannot be passed from a server component to a client component. In Next.js, create the picker inside a client component, as shown in the Frameworks guide.

Error reasons

#

When typed text is a date the picker refuses, it emits error with the code unavailable-date. input holds the text and reason says why. The type of reason is UnavailableReason.

ReasonMeaning
"min"The date is before minDate.
"max"The date is after maxDate.
"disabled"The date is in disabledDates, outside enabledDates or refused by isDateDisabled.
"weekday"The weekday is in disabledWeekdays.
"range-length"A range is shorter than range.minLength or longer than range.maxLength.
"multiple-max"A multiple selection is over multiple.max.
index.ts
picker.on("error", ({ code, reason, input }) => {
  if (code === "unavailable-date") {
    console.log(reason, input);
  }
});
#
Esc