Date Picker

FREE

Date and date-range picker built on Calendar and Popover, localized with Intl.

Playground

Change the props and watch the component and its code update live.

Props

Mode

Locale

Week starts on

Format

No past dates

No weekends

Clearable

Size

Primary color

Code

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

<DatePicker
  locale="tr-TR"
  clearable
  formatOptions={{ dateStyle: "medium" }}
/>

Terminal

npx @bloxa/cli add date-picker
# or: npx shadcn@latest add @bloxa/date-picker

No past dates, no weekends, up to two months ahead.

Every component also accepts the props of the element it renders.

Prop	Type	Default	Description
mode	"single" \| "range"	"single"	Single date or range.
value / defaultValue	Date \| { from?, to? }	—	Selected date(s).
onValueChange	(value) => void	—	Called when the selection changes.
formatOptions	Intl.DateTimeFormatOptions	—	Date format on the trigger.
clearable	boolean	false	Clear button.
locale / weekStartsOn / minDate / maxDate / isDateDisabled	—	—	Same as Calendar.
numberOfMonths	1 \| 2	2	Months side by side in range mode.
size	"sm" \| "md" \| "lg"	"md"	Height and text size.