Bileşenler

DatePicker

Gün, ay ve yıl parçalarına yazılan ya da açılır takvimden seçilen tarih alanı.

Storybook: Storybook
Kaynak kod: Kaynak kod

Kurulum

Paket: @bigbang/ui
İçe aktarma: import { DatePicker } from '@bigbang/ui';
Kaynak: DatePicker.tsx
Storybook: DatePicker · Playground

DatePicker, @bigbang/ui paketindedir.

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

<DatePicker label="Tarih" name="date" value={date} onValueChange={setDate} min={parseDate('2026-01-01')} />;

Özellikler

labelZorunlu

Açıklama: Görünen etiket; tarih parçalarını ve takvimi adlandırır.
Tür: string

description

Açıklama: Alanın altındaki yardım metni; aria-describedby ile bağlanır.
Tür: ReactNode

error

Açıklama: Verilirse alan geçersiz olur ve mesaj okunur. Verilmezse min ve max dışındaki tarihler yerleşik bir mesaj alır.
Tür: string

invalid

Açıklama: Alanı mesajsız geçersiz işaretler.
Tür: boolean
Varsayılan: false

required

Açıklama: Tarih zorunludur: etiket işaretlenir ve parçalar aria-required bildirir.
Tür: boolean
Varsayılan: false

value

Açıklama: Kontrol ettiğinizde seçili tarih, boşken null. onValueChange ile birlikte verin. Tarihler CalendarDate türündedir, asla JS Date değil.
Tür: CalendarDate | null

defaultValue

Açıklama: Kontrolsüz alanın ilk tarihi.
Tür: CalendarDate

onValueChange

Açıklama: Gün, ay ve yıl tamamlanınca tarihle, kullanıcı birini silince null ile çağrılır.
Tür: (value: CalendarDate | null) => void

min

Açıklama: En erken tarih. Önceki günler takvimde devre dışıdır; yazılan önceki bir tarih mesaj gösterir.
Tür: CalendarDate

max

Açıklama: En geç tarih. Sonraki günler takvimde devre dışıdır; yazılan sonraki bir tarih mesaj gösterir.
Tür: CalendarDate

isDateUnavailable

Açıklama: Seçilemeyen günler için, ör. tatiller, true döndürün.
Tür: (date: CalendarDate) => boolean

dayStatus

Açıklama: Takvimde günün altında küçük bir durum noktası; günün adıyla okunur.
Tür: (date: CalendarDate) => DayStatus

size

Açıklama: Alan yüksekliği: 32, 36 ve 40 px.
Tür: 'sm' | 'md' | 'lg'
Varsayılan: 'md'

readOnly

Açıklama: Tarih okunabilir ama değiştirilemez; takvim açılmaz.
Tür: boolean
Varsayılan: false

disabled

Açıklama: Parçaları, takvim düğmesini ve etiketi devre dışı bırakır.
Tür: boolean
Varsayılan: false

name

Açıklama: Alan adı; form tarihi YYYY-MM-DD olarak alır.
Tür: string

className

Açıklama: Kök öğeye eklenir; yalnızca yerleşim için kullanın.
Tür: string

Veri öznitelikleri

data-component="date-picker": kök öğe üzerinde.
data-part: label, box, segments, trigger, popup, calendar, grid, description, error.
Parçada data-segment (day, month, year) ve boşken data-placeholder.