Skip to content

Foundations

Date Field

Calendar and date picker — month grid, ranges, keyboard navigation and min / max.

2 variantsMIT

Preview

November 2026

November 2026

Installation

Copies the component into components/ui and installs its dependencies and theme tokens.

pnpm dlx shadcn@latest add https://tuffui.com/r/date-field.json

Usage

Pass your own data and wire the callbacks to your agent runtime.

import { Calendar, DatePicker } from "@/components/ui/date-field";

<DatePicker
  label="Ship the release on"
  value={date}
  onValueChange={setDate}
  min={new Date()}
  isDisabled={(d) => d.getDay() === 0 || d.getDay() === 6}
/>

<Calendar mode="range" value={range} onValueChange={setRange} />

Props

PropTypeDefaultDescription
mode"single" | "range""single"Calendar: one day, or a from / to range picked with two clicks.
valueDate | null | { from; to }—Selected day, or range in range mode. Calendar is controlled.
onValueChange(value) => void—Fires on pick. DatePicker closes its popover after.
min / maxDate—Days outside are disabled.
isDisabled(date: Date) => boolean—Disable individual days, e.g. weekends.
localestring—Month and weekday names via Intl.
label / placeholder / formatOptionsstring / string / Intl.DateTimeFormatOptions—DatePicker trigger text.
type DateRange = { from: Date | null; to: Date | null };
// Keys: arrows move a day / week, Home / End the week, PageUp / PageDown the month,
// Enter or Space picks. Without a value the calendar opens on the current month,
// so pass a value when you prerender to keep server and client markup equal.