# منتقي التاريخ: الحدود والأيام المحظورة

> Limit the slotsmith DatePicker with minDate and maxDate, block single days with disabledDates, and disable the whole control.

The slotsmith date picker limits what can be picked in two ways: `minDate` and `maxDate` set the earliest and the latest date, and `disabledDates` blocks single days such as weekends or booked nights. Blocked days stay focusable, but cannot be picked.

```tsx
import { useId, useState } from "react";
import { addMonths, DatePicker, fromISODate, type ISODate } from "slotsmith/date-picker";
import { useToday } from "../shared/today";

/** Saturday or Sunday, read from the date itself. */
const isWeekend = (date: ISODate) => {
  const day = fromISODate(date)?.getDay();
  return day === 0 || day === 6;
};

export default function BoundsAndBlockedDays() {
  const id = useId();
  const today = useToday();
  const [visit, setVisit] = useState<ISODate | null>(null);

  return (
    <div style={{ display: "grid", gap: "1rem", maxWidth: 288 }}>
      <div>
        <p id={`${id}-visit`}>Appointment</p>
        <DatePicker
          value={visit}
          onChange={setVisit}
          // Nothing before today or more than two months ahead; the calendar stops at both months.
          minDate={today}
          maxDate={addMonths(today, 2)}
          // Weekends stay focusable and are announced, but cannot be picked.
          disabledDates={isWeekend}
          aria-labelledby={`${id}-visit`}
        />
        <p>Appointment: {visit ?? "none"}</p>
      </div>
      <div>
        <p id={`${id}-locked`}>Confirmed on</p>
        {/* `disabled` turns off the whole control, not single days. */}
        <DatePicker disabled defaultValue="2026-03-12" aria-labelledby={`${id}-locked`} />
      </div>
    </div>
  );
}
```

The appointment can be any weekday from today to two months ahead. Open it and move with the arrow keys: focus crosses the weekends, and stops at today.

## minDate and maxDate

[`minDate`](https://slotsmith.dev/ar/components/date-picker/api/#prop-minDate) and [`maxDate`](https://slotsmith.dev/ar/components/date-picker/api/#prop-maxDate) are days written like the value (an ISO instant by default, or as your [value format](https://slotsmith.dev/ar/components/date-picker/guides/value-format-and-time-zone/) says; a plain `"2026-03-12"` is read too), both inclusive. With them set:

- Days outside the bounds cannot be picked.
- The calendar does not go past the bounds' months: the previous and next buttons are disabled there.
- The arrow keys, <kbd>PgUp</kbd> and <kbd>PgDn</kbd> stop at the bounds.
- The year select lists the bounds' years only. Without bounds it lists ten years either side of the year on screen.

## disabledDates

[`disabledDates`](https://slotsmith.dev/ar/components/date-picker/api/#prop-disabledDates) is a function that receives a date and returns `true` to block it. The demo blocks Saturdays and Sundays; a set of booked dates works the same way: `(date) => booked.has(date)`.

A blocked day, like a day outside the bounds, gets `aria-disabled="true"` and `data-disabled`, never the `disabled` attribute. It stays focusable, so the arrow keys cross it and a screen reader announces it. A click or <kbd>Enter</kbd> on it does nothing.

In range mode, `disabledDates` stops a blocked day from being picked as the start or the end. It does not stop a range from spanning blocked days. If a stay must not include a booked night, check the range in `onChange`.

## Disabling the whole control

[`disabled`](https://slotsmith.dev/ar/components/date-picker/api/#prop-disabled) is separate from `disabledDates`: it turns off the whole picker, like the second one in the demo. The trigger gets `aria-disabled="true"`, leaves the tab order, does not open, and shows no clear button.