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

Disabled Dates

Make weekdays, listed dates or any day you choose unselectable with @pglejzer/datepicker-ui.

Weekdays

#

calendar.disabledWeekdays takes weekday numbers, where 0 is Sunday and 6 is Saturday. This demo disables weekends.

Weekends
import DatepickerUI from "@pglejzer/datepicker-ui";
import "@pglejzer/datepicker-ui/index.css";


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

A list of dates

#

calendar.disabledDates is a list of Date objects or ISO strings. The demo disables three days counted from today.

Disabled list
import DatepickerUI from "@pglejzer/datepicker-ui";
import "@pglejzer/datepicker-ui/index.css";


const dayFromToday = (offset) => {
  const date = new Date();
  date.setDate(date.getDate() + offset);
  return date;
};


new DatepickerUI("#date", {
  calendar: {
    disabledDates: [dayFromToday(1), dayFromToday(2), dayFromToday(5)],
  },
}).create();

A custom rule

#

calendar.isDateDisabled receives a Date and returns true for a day that cannot be selected. It adds to minDate, maxDate, disabledDates and enabledDates. This rule closes the 1st and the 15th of every month.

isDateDisabled
import DatepickerUI from "@pglejzer/datepicker-ui";
import "@pglejzer/datepicker-ui/index.css";


new DatepickerUI("#date", {
  calendar: {
    isDateDisabled: (date) => date.getDate() === 1 || date.getDate() === 15,
  },
}).create();

Only listed dates

#

When calendar.enabledDates is set, only those days can be selected. Every other day is disabled.

enabledDates
import DatepickerUI from "@pglejzer/datepicker-ui";
import "@pglejzer/datepicker-ui/index.css";


const dayFromToday = (offset) => {
  const date = new Date();
  date.setDate(date.getDate() + offset);
  return date;
};


new DatepickerUI("#date", {
  calendar: {
    enabledDates: [dayFromToday(2), dayFromToday(4), dayFromToday(6)],
  },
}).create();

Docs: Disabled Dates · Options

Esc