DatePicker

Language:

Single Date

Short Display Format (dd/mm/yyyy)

Single Date with Day Navigation

Date Range

Date + Time

With Min/Max Dates

Only dates within the next 30 days are selectable.

Disable Weekends

Saturdays and Sundays cannot be selected.

Disabled Specific Dates

Holidays (2026-11-15, 2026-11-20, 2026-12-25) are disabled. Combined with disableWeekends.

Year & Month Select

Dropdown selects for year and month navigation.

Disabled

DatePicker

A date picker input with popover calendar. Supports single date, date range, and date + time selection modes.

Usage

import { DatePicker } from "@/components/ui/date-picker"

// Single date
<DatePicker
  value={date}
  onChange={setDate}
/>

// Date range
<DatePicker
  mode="range"
  value={range}
  onChange={setRange}
/>

// Date + time
<DatePicker
  mode="datetime"
  value={dateTime}
  onChange={setDateTime}
/>

Props

Prop	Type	Default	Description
mode	"single" \| "range" \| "datetime"	"single"	Selection mode. Single picks one date, range picks from/to, datetime adds time inputs.
value	Date \| DateRange \| undefined	—	Selected value. Date for single/datetime, { from?: Date; to?: Date } for range.
onChange	(value) => void	—	Called when selection changes. Argument type matches the mode.
displayFormat	"long" \| "short"	"long"	Date display format. "long" shows full date (e.g. March 21, 2026), "short" shows dd/MM/yyyy.
enableDayNavigation	boolean	false	Single mode only. Adds < > buttons beside the trigger to move one day forward or backward.
placeholder	string	—	Custom placeholder text. Defaults to a localized string per mode.
disabled	boolean	false	Disables the trigger button.
disableWeekends	boolean	false	Prevents selection of Saturdays and Sundays.
disabledDates	string[]	—	Array of dates in "yyyy-MM-dd" format to disable. Can be combined with disableWeekends.
enableYearMonthSelect	boolean	false	Shows dropdown selects for year and month in the calendar header for quick navigation. Range defaults to 100 years back / 10 years forward, or uses minDate/maxDate.
language	"en" \| "pt"	"en"	Locale for labels, month/weekday names, and date formatting.
format	string	—	Custom date-fns format string. Defaults: "PPP" (single), "PP" (range), "PPP HH:mm" (datetime).
minDate	Date	—	Earliest selectable date.
maxDate	Date	—	Latest selectable date.
triggerClassName	string	—	Additional classes for the trigger button.
className	string	—	Additional classes for the popover content.