# منتقي التاريخ: يوم واحد ونطاق وتواريخ متعددة

> Pick one date, several dates or a range with the slotsmith DatePicker: the mode prop, the shape of the value in each mode, and how picking works.

The slotsmith date picker's `mode` prop sets what can be picked: `single` (the default) for one date, `multiple` for any number of dates, or `range` for a start and an end. It also sets the shape of `value`, `defaultValue` and `onChange`.

```tsx
import { useId, useState } from "react";
import { DatePicker, type DateRange, type ISODate } from "slotsmith/date-picker";

export default function Modes() {
  const id = useId();
  // `mode` sets the shape of value, defaultValue and onChange.
  const [due, setDue] = useState<ISODate | null>(null);
  const [daysOff, setDaysOff] = useState<ISODate[]>([]);
  const [stay, setStay] = useState<DateRange | null>(null);

  return (
    <div style={{ display: "grid", gap: "1rem", maxWidth: 288 }}>
      <div>
        <p id={`${id}-due`}>Due date (single)</p>
        <DatePicker value={due} onChange={setDue} aria-labelledby={`${id}-due`} />
        <p>Value: {due ?? "null"}</p>
      </div>
      <div>
        <p id={`${id}-off`}>Days off (multiple)</p>
        <DatePicker mode="multiple" value={daysOff} onChange={setDaysOff} placeholder="Pick days" aria-labelledby={`${id}-off`} />
        <p>Value: {daysOff.length ? daysOff.join(", ") : "[]"}</p>
      </div>
      <div>
        <p id={`${id}-stay`}>Stay (range)</p>
        <DatePicker mode="range" value={stay} onChange={setStay} placeholder="Pick your dates" aria-labelledby={`${id}-stay`} />
        <p>Value: {stay?.from ? `${stay.from} to ${stay.to ?? "…"}` : "null"}</p>
      </div>
    </div>
  );
}
```

Pick in each of the three: the line under each picker shows the value `onChange` received.

## The value in each mode

Every date is an ISO string: by default the instant the day starts in the picker's time zone, such as `"2026-03-12T00:00:00+03:00"`, which `new Date()` reads as it is. A day without a zone, such as `"2026-03-12"`, is always read as that day. For the calendar day alone, which means the same day everywhere, set [`valueFormat`](https://slotsmith.dev/ar/components/date-picker/guides/value-format-and-time-zone/) to `"YYYY-MM-DD"`.

- **Single.** [`value`](https://slotsmith.dev/ar/components/date-picker/api/#prop-value) is a date or `null`. `mode` can be left out.
- **Multiple.** [`value`](https://slotsmith.dev/ar/components/date-picker/api/#prop-value-multiple) is an array of dates, sorted, and empty when nothing is picked.
- **Range.** [`value`](https://slotsmith.dev/ar/components/date-picker/api/#prop-value-range) is `{ from, to }` or `null`. Both ends are inclusive, and `to` is missing while only the start is picked.

`mode` narrows the types, so one mode cannot be given another's value. `toISODate(date)` and `fromISODate(text)` convert to and from a `Date`, and `today()`, `addDays()` and `addMonths()` do the arithmetic on the strings.

## Picking

- **Single.** A click, or <kbd>Enter</kbd> on the focused day, sets the date, closes the calendar and returns focus to the trigger.
- **Multiple.** Each pick adds the day, or removes it if it is already picked. The calendar stays open.
- **Range.** The first pick sets the start and the second the end. While the end is missing, the days up to the hovered or focused day are previewed. A pick before the start, or with a complete range, begins a new range. The calendar stays open.

[`closeOnSelect`](https://slotsmith.dev/ar/components/date-picker/api/#prop-closeOnSelect) changes whether picking closes the calendar; in range mode it closes once the end is picked. The clear button in the trigger empties the value: `null` in single and range mode, `[]` in multiple. Set [`clearable`](https://slotsmith.dev/ar/components/date-picker/api/#prop-clearable) to `false` to leave it out.

## What the trigger shows

The [text field](https://slotsmith.dev/ar/components/date-picker/guides/typing/) shows each date in the locale's numeric order, such as `03/20/2026`: a range as `03/20/2026 – 03/24/2026`, several dates separated by commas.

With `trigger="button"`, the trigger formats each date with `Intl` in the picker's locale: "Mar 20, 2026" by default, and [`format`](https://slotsmith.dev/ar/components/date-picker/api/#prop-format) takes other `Intl.DateTimeFormat` options. In multiple mode it lists up to two dates and then says how many, from the [`count`](https://slotsmith.dev/ar/components/date-picker/api/#label-count) label. In range mode it joins the two ends with the [`range`](https://slotsmith.dev/ar/components/date-picker/api/#label-range) label, and shows the start alone with [`rangeStart`](https://slotsmith.dev/ar/components/date-picker/api/#label-rangeStart) until the end is picked.

## Styling the days

Each day carries its state as `data-*` attributes: `data-selected`, `data-range-start`, `data-range-end`, `data-in-range` for every day of a complete range, `data-in-preview` while the end is being chosen, and `data-today`, `data-outside`, `data-weekend` and `data-disabled`. The list is on the [API page](https://slotsmith.dev/ar/components/date-picker/api/#slot-Day).