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

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.

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 to "YYYY-MM-DD".

• Single. value is a date or null. mode can be left out.
• Multiple. value is an array of dates, sorted, and empty when nothing is picked.
• Range. value 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 Enter 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 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 to false to leave it out.

What the trigger shows

The text field 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 takes other Intl.DateTimeFormat options. In multiple mode it lists up to two dates and then says how many, from the count label. In range mode it joins the two ends with the range label, and shows the start alone with 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.