Date picker and date range picker on react-day-picker 9: presets beside a two-month calendar, disabled days by rule (weekends, the past), and a clear button. Works with Field labels and hints. Part of the Layro System: layro.vercel.app.
import * as React from "react";
import { addDays, differenceInCalendarDays, format, startOfMonth, subDays } from "date-fns";
import { DatePicker, DateRangePicker, Field, type DateRange } from "@/components/ui/date-range-picker-presets";
/* Scheduling a report. The due date skips weekends and the past; the
reporting period has presets beside the calendar, because that is how
most ranges are chosen. The summary under the form follows both. */
const TODAY = new Date(2026, 8, 28);
export default function DatePickerDemo() {
const [due, setDue] = React.useState<Date | undefined>(addDays(TODAY, 16));
const [range, setRange] = React.useState<DateRange | undefined>({ from: subDays(TODAY, 13), to: TODAY });
const days = range?.from && range.to ? differenceInCalendarDays(range.to, range.from) + 1 : 0;
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-6">
<div className="w-full max-w-[420px] min-w-0 rounded-[18px] [corner-shape:squircle] bg-card p-5 ring-1 ring-border sm:p-6">
<h2 className="text-[16px] font-semibold tracking-[-0.01em]">Schedule a usage report</h2>
<p className="mt-1 text-[13px] text-muted-foreground">Sent to finance as a PDF with the invoices attached.</p>
<div className="mt-5 grid gap-4">
<Field label="Reporting period">
<DateRangePicker
value={range}
onValueChange={setRange}
presets={[
{ label: "Last 7 days", range: () => ({ from: subDays(TODAY, 6), to: TODAY }) },
{ label: "Last 30 days", range: () => ({ from: subDays(TODAY, 29), to: TODAY }) },
{ label: "This month", range: () => ({ from: startOfMonth(TODAY), to: TODAY }) },
]}
/>
</Field>
<Field label="Send on" hint="Weekdays only, from tomorrow">
<DatePicker value={due} onValueChange={setDue} clearable disabledDays={[{ dayOfWeek: [0, 6] }, { before: addDays(TODAY, 1) }]} />
</Field>
</div>
<p className="mt-5 rounded-[12px] [corner-shape:squircle] bg-muted/60 p-3 text-[12.5px] leading-relaxed text-muted-foreground" aria-live="polite">
{range?.from && range.to && due ? (
<>
Covers <span className="font-medium text-foreground">{days} days</span> ({format(range.from, "d MMM")} – {format(range.to, "d MMM")}), sent on{" "}
<span className="font-medium text-foreground">{format(due, "EEEE d MMM")}</span>.
</>
) : (
"Pick a period and a day to send it."
)}
</p>
</div>
</div>
);
}
Part of Layro System — browse the full library on 21st.dev.