DatePicker

Ne zaman kullanılır

DatePicker formlarda tek bir tarih içindir: başlangıç tarihi, son tarih, doğum tarihi. Kullanıcı tarihi yazabilir ya da takvimden seçebilir.

Ne zaman kullanılmaz

• Aralık için: DateRangePicker kullanın.
• Sayfada açık duran bir takvim için: Calendar kullanın.
• Saat için: TimeField kullanın.

Anatomi

Tarih

GG.AA.YYYY

Gün, ay ve yılı yazın ya da takvimden seçin.

AçıkKoyu

Kodu kopyala

import { DatePicker } from '@bigbang/ui';

export default function Default() {
  return <DatePicker label="Tarih" description="Gün, ay ve yılı yazın ya da takvimden seçin." className="max-w-xs" />;
}

1. Etiket: Parça grubunu adlandırır.
2. Parçalar: Gün, ay, yıl; boşken yer tutucu (GG, AA, YYYY).
3. Takvim düğmesi: Açılır takvimi açar.
4. Açılır takvim: Calendar ile aynı ızgara.
5. Açıklama ve hata: Alanın altında.

Davranış

• Rakam yazmak parçayı doldurur; parça dolunca odak sonrakine geçer. Ayırıcı yazmak da ilerletir.
• Oklar parçayı artırır ve azaltır, sınırda başa döner. Backspace parçayı temizler, boş parçada geri gider.
• Gün ayın son gününden büyükse ayın son gününe çekilir (31.02 → 28.02).
• min, max ya da isDateUnavailable dışındaki bir tarih yazılırsa yerleşik bir mesaj gösterilir.
• Takvimde gün seçilince açılır kapanır, odak takvim düğmesine döner.

Yönergeler

• Biçimi açıklamada anlatmayın; yer tutucular gösterir.
• Doğum tarihi gibi uzak tarihlerde kullanıcı yazarak girer; takvim isteğe bağlıdır.
• Sınırları metinle de söyleyin.

İçerik

Türkçe	İngilizce
Takvimi aç	Open calendar
GG / AA / YYYY	DD / MM / YYYY
{min} ile {max} arasında bir tarih seçin	Choose a date from {min} to {max}
Bu tarih seçilemez	This date is not available

İlgili bileşenler

• Calendar: Açık duran takvim.
• DateRangePicker: Tarih aralığı.
• TimeField: Saat.