DatePicker
Yazılabilen bir tarih alanı; yanındaki buton Calendar'ı bir popover içinde açar. Yazılan metin locale'in sayısal sırasıyla (tr-TR için 30.09.2026, en-US için 09/30/2026) ya da ISO biçiminde (2026-09-30) okunur.
GG.AA.YYYY biçiminde yaz ya da takvimden seç.
const [date, setDate] = useState<Date | null>(null);
<Field label="Son tarih" description="GG.AA.YYYY biçiminde yaz ya da takvimden seç.">
<DatePicker
locale="tr-TR"
placeholder="GG.AA.YYYY"
calendarLabel="Tarih seç"
previousMonthLabel="Önceki ay"
nextMonthLabel="Sonraki ay"
value={date}
onValueChange={setDate}
name="due"
/>
</Field>Import
import { DatePicker } from "@meridui/react";Örnekler
Aralık
mode="range" bir başlangıç ve bir bitiş alanı render'lar. İki gün de seçilince takvim kapanır.
const [range, setRange] = useState<DateRange>({ start: null, end: null });
<DatePicker
locale="tr-TR"
mode="range"
value={range}
onValueChange={setRange}
startLabel="Giriş tarihi"
endLabel="Çıkış tarihi"
/>En erken, en geç ve devre dışı günler
Sınırların dışında yazılan tarihler reddedilir ve alan son geçerli değere döner.
Yalnızca hafta içi, bugünden itibaren.
<DatePicker locale="tr-TR" min={today} isDateDisabled={(d) => d.getDay() === 0 || d.getDay() === 6} />Boyutlar ve durumlar
<DatePicker aria-label="Küçük" size="sm" />
<DatePicker aria-label="Geçersiz" invalid />
<DatePicker aria-label="Devre dışı" disabled defaultValue={today} />Formda
name verildiğinde gizli bir input yyyy-mm-dd gönderir. Aralık iki değeri name[] altında gönderir. toISODate(date) aynı string'i verir.
API referansı
Bir div render'lar; diğer div attribute'ları ve ref ona gider. aria-label / aria-labelledby metin alanına ad verir. Bir Field içinde (ilk) alan id'yi, açıklamayı, hatayı, required ve disabled'ı alır.
| Prop | Tip | Varsayılan | Açıklama |
|---|---|---|---|
mode | "single" | "range" | "single" | Tek gün ya da başlangıç ve bitiş günü. |
value / defaultValue | Date | null | DateRange | – | Controlled ya da başlangıç seçimi. |
onValueChange | (value) => void | – | Yeni gün (ya da aralık) ile çağrılır; alan temizlenince null. |
locale | string | "en-US" | Takvim adları, hafta başı ve yazılan sayısal biçim. Türkçe arayüzde "tr-TR". |
min / max | Date | – | Seçilebilen en erken ve en geç gün. |
isDateDisabled | (date: Date) => boolean | – | Tek tek günleri kullanılamaz işaretler. |
weekStartsOn | 0 – 6 | – | Takvimin ilk kolonu. Varsayılanı locale'in hafta başı. |
open / onOpenChange | boolean / (open) => void | – | Takvimin controlled açık state'i. |
placeholder | string | locale deseni, ör. MM/DD/YYYY | Metin alan(lar)ının placeholder'ı. Türkçe arayüzde "GG.AA.YYYY". |
calendarLabel | string | "Choose date" | Takvim butonunun erişilebilir adı. Türkçe arayüzde "Tarih seç". |
dialogLabel | string | calendarLabel | Takvim dialog'unun erişilebilir adı. |
previousMonthLabel / nextMonthLabel | string | "Previous month" / "Next month" | Takvimdeki ay butonlarının adları. |
startLabel / endLabel | string | "Start date" / "End date" | Yalnızca aralık: iki alanın adları. |
size | "sm" | "md" | "lg" | "md" | Alanın yüksekliği. |
invalid / disabled / required | boolean | – | Durumlar; Field içinde ondan gelir. |
name | string | – | yyyy-mm-dd taşıyan gizli input; aralık name[] ile iki kez gönderir. |
icon | ReactNode | – | Takvim butonundaki ikon. |
inputId | string | – | (İlk) metin alanının id'si. |
Stil verme
| Sınıf | Eleman |
|---|---|
.mrd-date-picker | Kök (data-size, data-mode, data-invalid, data-disabled) |
.mrd-date-picker__field | Kenarlıklı alan |
.mrd-date-picker__input, .mrd-date-picker__separator | Metin alan(lar)ı ve aralık tiresi |
.mrd-date-picker__trigger | Takvim butonu (data-state) |
.mrd-date-picker__content | Takvimi tutan popover |
Erişilebilirlik
Asıl girdi metin alanıdır; takvim butonu (aria-haspopup="dialog") seçili güne focus veren, modal olmayan bir dialog açar. Gün seçmek ya da Escape dialog'u kapatır ve focus'u butona döndürür. Grid içindeki tuşlar için Calendar sayfasına bak.
| Tuş | Ne yapar |
|---|---|
| AltArrowDown | Metin alanında: takvimi açar. |
| Enter | Metin alanında: yazılan tarihi okur. Takvimde: focus'taki günü seçer. |
| Escape | Takvimi kapatır, focus'u butona döndürür. |