Date Picker React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Date Picker is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import DatePicker from @/components/ui/date-picker.

import { useState } from "react"
import { addDays } from "date-fns"
import { DatePicker } from "@/components/ui/date-picker"

export function DeliveryDate() {
  const [date, setDate] = useState<Date | null>(null)
  return (
    <DatePicker
      label="Delivery date"
      description="We deliver Monday to Friday."
      value={date}
      onValueChange={setDate}
      locale="en-US"
      min={addDays(new Date(), 1)}
      disabled={{ dayOfWeek: [0, 6] }}
      presets
      presetLabels={{ nextWeek: "In a week" }}
      invalidDateText="That date does not exist"
      outOfRangeText="We do not deliver on that day"
      sheetTitle="Delivery date"
      name="delivery_date"
    />
  )
}

Props

• labeldefault ""
  ReactNode

  The field label, linked to the input. Plain text also titles the phone sheet.

• descriptiondefault ""
  ReactNode

  Helper text under the field, linked with aria-describedby.

• errordefault ""
  ReactNode

  Replaces the description with an animated error and marks the field invalid. It wins over invalidDateText and outOfRangeText.

• requireddefault false
  boolean

  The red mark after the label and required on the input.

• invaliddefault false
  boolean

  The invalid look and aria-invalid without a message. A controlled value outside min / max is flagged the same way.

• disableddefault false
  boolean or DateMatcher or DateMatcher[] (DateMatcher: Date, Date[], { from, to }, { before }, { after }, { dayOfWeek } or (date) => boolean)

  true dims the field, blocks typing and never opens the calendar (the hidden input is not submitted). A DateMatcher instead disables those days: a date, a list, { from, to }, { before }, { after }, { dayOfWeek: [0, 6] } for weekends, or a test function.

• readOnlydefault false
  boolean

  The date stays visible and selectable but can not change: no typing, no calendar, no clear button.

• value
  Date | null

  The date, controlled (null is empty). With withTime the Date carries the time. A value outside min / max shows as given and is flagged invalid.

• defaultValuedefault "null"
  Date | null

  The starting date while uncontrolled. A form reset returns to it.

• onValueChange
  (date: Date | null) => void

  Called with the new local Date as soon as a complete typed date is allowed, and after a day, a preset, a time, Clear or the sheet's Done. null when cleared.

• placeholderdefault ""
  string

  Empty uses the locale's pattern in lowercase ("dd.mm.yyyy", "mm/dd/yyyy"). Localized forms pass their own, like "zz.ll.aaaa" in Romanian. It also becomes the screen reader format hint.

• localedefault ""
  string

  How dates are read and written, the month and weekday names and the first day of the week: ro-RO 23.09.2026 from Monday, en-US 09/23/2026 from Sunday. Empty uses the nearest LocaleProvider, else the page's language.

• displayFormat
  Intl.DateTimeFormatOptions

  How the value shows while the field is not focused ({ dateStyle: "long" } gives "March 5, 1990"). Typing is always numeric. Default: 2 digit day and month, numeric year.

• editabledefault true
  boolean

  Typing on desktop. Off, the field is a button that only opens the calendar (phones always work that way).

• autoFormatdefault true
  boolean

  Separators appear as digits are typed: "2309" becomes "23.09.".

• parseKeywords
  Partial<Record<"today" | "tomorrow" | "yesterday", string[]>>

  Words that mean a day, matched without case or diacritics. English by default; another language passes its own words, e.g. { today: ["hoy"], tomorrow: ["mañana"], yesterday: ["ayer"] }.

• min
  Date

  The first day that can be picked. Earlier days are disabled, navigation stops at its month and a typed earlier date shows outOfRangeText.

• max
  Date

  The last day that can be picked (18 years ago for a birthday).

• presetsdefault false
  boolean | { label: ReactNode; value: Date | (() => Date); key?: string }[]

  Chips above the calendar. true gives Today, Tomorrow and Next week; or pass your own. A preset outside the limits is disabled.

• presetLabels
  Partial<{ today: string; tomorrow: string; nextWeek: string }>

  Names of the built-in presets ("Today", "Tomorrow", "Next week").

• clearabledefault true
  boolean

  A clear button in the field while it has a date (and Clear in the panel footer and the sheet).

• withTimedefault false
  boolean

  A time field under the calendar; the value keeps both and the field reads "24.09.2026, 14:30". Picking a day keeps the panel open until Done. Clearing keeps the time for the next pick.

• timeStepdefault "15"
  number

  Minute step of the time field.

• hourCycledefault "auto"
  "auto" | "h12" | "h23"

  12 or 24 hours for the time; auto follows the locale.

• timeProps
  Partial<TimePickerProps>

  Anything else for the time field: labels, min, max, disabledTimes, showNow.

• closeOnSelectdefault true
  boolean

  Picking a day closes the panel. Never with withTime. Off, the panel (and the sheet) get a Done button.

• responsivedefault true
  boolean

  Below 768px the field opens a bottom sheet instead of the popover. Off, phones get the popover and can type.

• weekStartsOndefault -1
  0 | 1 | 2 | 3 | 4 | 5 | 6 | -1

  The first day of the week: 0 Sunday ... 6 Saturday; -1 follows the locale (Monday in ro-RO, Sunday in en-US).

• fixedWeeksdefault true
  boolean

  Six weeks in every month, so the panel never changes height while you browse.

• monthYearPickerdefault true
  boolean

  The calendar caption opens a months grid, then a years grid, for fast jumps (birthdays).

• numberOfMonthsdefault 1
  number

  Months side by side in the popover (1 to 3). The phone sheet always shows one.

• events
  { date: Date; tone?: Tone; color?: string; label?: string }[]

  Dots under days (deliveries, deadlines); labels join the day's aria-label.

• calendarProps
  Partial<CalendarProps>

  Anything else for the calendar: size, radius, strikeDisabled, showWeekNumbers, todayButton, renderDay, labels.

• invalidDateTextdefault "Enter a valid date"
  string

  The error after blur while the text does not parse ("31.02.2026").

• outOfRangeTextdefault "This date is not available"
  string

  The error after blur for a typed day outside min / max or a disabled day.

• defaultOpendefault false
  boolean

  Starts with the calendar (or the sheet) open. Pass open and onOpenChange to control it.

• open
  boolean

  Whether the calendar is open, controlled. It never opens while disabled or readOnly.

• onOpenChange
  (open: boolean) => void

  Called when the popover or sheet opens or closes.

• sizedefault "md"
  "sm" | "md" | "lg"

  Field heights of 32, 40 and 48px (md is 44px on touch screens), with matching text.

• variantdefault "soft"
  "soft" | "outline" | "underline" | "ghost"

  The field box: a tinted fill, a border, a bottom line that grows on focus, or nothing until hover.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg" | "full"

  Corner radius of the field, scaled per size like the button. Ignored by underline.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The selected day, the chosen preset and the Done button.

• colordefault ""
  string

  Any CSS color for the selection; replaces the tone.

• icon
  ReactNode

  The calendar button's icon.

• sheetTitledefault "Select date"
  string

  The phone sheet's title when the label is not plain text (or missing).

• labels
  Partial<{ clear; open; done; dialog; time; presets; format: string }>

  Every other string, merged over the English defaults ("Clear", "Open calendar", "Done", "Choose date", "Time", "Quick picks", "Format: {format}"). format is the screen reader hint after the field.

• namedefault ""
  string

  A hidden input with this name and the local ISO date ("2026-09-23", "2026-09-23T14:30" with withTime), never shifted to UTC.

• sidedefault "bottom"
  "top" | "right" | "bottom" | "left"

  Where the popover opens; it flips when there is no room.

• aligndefault "start"
  "start" | "center" | "end"

  How the popover lines up with the field.

• container
  HTMLElement | null

  Portal target of the popover and the sheet; defaults to document.body.

• fieldProps
  Partial<FieldProps>

  Anything else for the Field wrapper: optional, labelAction, orientation, labelWidth, hideLabel.

• id
  string

  The input's id; generated when left out.

• classNames
  Partial<Record<"field" | "label" | "description" | "error" | "counter" | "box" | "input" | "trigger" | "clear" | "content" | "presets" | "preset" | "calendar" | "time" | "footer", string>>

  Extra classes for the inner parts. content is the popover (or the sheet).

• className
  string

  Extra classes for the outermost element: the Field when there is a label or message, else the box.

• ref
  Ref<HTMLInputElement> (a useRef object or an (el) => void callback)

  The text input. Other props (onBlur, autoFocus, aria-*, data-*) land on it too.

Parts

FAQ

Used in

More React input components