Date picker: Presets

The DatePicker’s presets prop adds shortcut buttons under the grid, such as “Next 7 days”. Each preset has a label and a value, which is one date or a range. Clicking it sets the value.

Stay: none

import { useState } from "react";
import { addDays, DatePicker, type DatePickerPreset, type DateRange } from "slotsmith/date-picker";
import { useToday } from "../shared/today";

export default function Presets() {
  const today = useToday();
  const [stay, setStay] = useState<DateRange | null>(null);

  const presets: DatePickerPreset[] = [
    { label: "Next 7 days", value: { from: today, to: addDays(today, 6) } },
    { label: "Next 30 days", value: { from: today, to: addDays(today, 29) } },
    // A single date in range mode picks that one day as both ends.
    { label: "Tomorrow", value: addDays(today, 1) },
  ];

  return (
    <div style={{ display: "grid", gap: "0.5rem", maxWidth: 288 }}>
      <DatePicker mode="range" value={stay} onChange={setStay} presets={presets} placeholder="Pick your dates" aria-label="Stay" />
      <p>Stay: {stay?.from ? `${stay.from} to ${stay.to ?? "…"}` : "none"}</p>
    </div>
  );
}

import { useSyncExternalStore } from "react";
import { today, type ISODate } from "slotsmith/date-picker";

/** The date a prerendered page is built with, so its HTML is the same on every build. */
export const PRERENDER_TODAY: ISODate = "2026-03-16";

// Today does not change while the page is open, so there is nothing to subscribe to.
const subscribe = () => () => {};

/**
 * Today as `YYYY-MM-DD`, safe to prerender: the fixed date on the server and
 * while hydrating, so the markup matches, then the visitor's real date.
 * An app that renders only in the browser can call `today()` directly.
 */
export function useToday(): ISODate {
  return useSyncExternalStore(subscribe, today, () => PRERENDER_TODAY);
}

Open the picker and click “Next 7 days”: the range is picked and the trigger shows it.

The presets prop

presets is an array of { label, value }. The labels are your own text, so translate them with the rest of your app. The value is converted to the picker’s mode:

Range mode. A range is set as it is. A single date picks that one day as both ends, like “Tomorrow” in the demo.
Single mode. A date is set as it is. A range sets its first day.
Multiple mode. A range picks every day in it, up to 366 days. A date picks that one day.

Applying a preset replaces the current value and shows the month of its first day. It closes the calendar when closeOnSelect is on, which is the default in single mode only.

A preset’s value is not checked against minDate, maxDate or disabledDates, so build presets that fit your bounds.

The footer always ends with a “Go to today” button, set apart from the presets. It is navigation, not a shortcut: it shows today’s month and makes today the day that takes focus, and it does not change the value. Its text comes from the today label.

To pick today in one click, add a preset: { label: "Today", value: today() }.

Presets and the current date

The demo’s presets are built from today’s date when it renders. today() from slotsmith/date-picker returns today as a YYYY-MM-DD string in the visitor’s own time zone, and addDays() and addMonths() move it.

On a page that is rendered on a server, today on the server may not be today for the visitor. The demo reads the date through a small useToday() hook, shown in its today.ts tab: a fixed date on the server and while hydrating, and the real date after that.

The Footer slot replaces the whole row. It receives presets, onPreset, onToday and todayLabel, so a design system’s chips or buttons can render them. The adapters do this.

The presets prop

Go to today

Presets and the current date

A different footer