Date Picker

FREE

Calendar ve Popover üzerine kurulu, Intl ile yerelleştirilmiş tarih ve tarih aralığı seçici.

Canlı düzenle

Ayarları değiştir; bileşen ve kodu anında güncellensin.

Ayarlar

Mod

Dil

Hafta başlangıcı

Biçim

Geçmiş kapalı

Hafta sonu kapalı

Temizlenebilir

Boyut

Ana renk

Kod

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

Bugünden önce ve hafta sonları seçilemez; en fazla 2 ay sonrası.

Her bileşen, oluşturduğu HTML elemanının özelliklerini de kabul eder.

Özellik	Tip	Varsayılan	Açıklama
mode	"single" \| "range"	"single"	Tek tarih veya aralık.
value / defaultValue	Date \| { from?, to? }	—	Seçili tarih(ler).
onValueChange	(value) => void	—	Seçim değişince çağrılır.
formatOptions	Intl.DateTimeFormatOptions	—	Butondaki tarih biçimi.
clearable	boolean	false	Temizle düğmesi.
locale / weekStartsOn / minDate / maxDate / isDateDisabled	—	—	Calendar ile aynı.
numberOfMonths	1 \| 2	2	Aralık modunda yan yana ay sayısı.
size	"sm" \| "md" \| "lg"	"md"	Yükseklik ve yazı boyutu.