Bileşenler

DateRangePicker

Başlangıç ve bitiş parçalarına yazılan ya da hazır aralıklar ve iki aylık takvimle seçilen tarih aralığı.

Storybook: Storybook
Kaynak kod: Kaynak kod

Kurulum

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

DateRangePicker, @bigbang/ui paketindedir.

import { DateRangePicker, type DateRange } from '@bigbang/ui';

<DateRangePicker label="Dönem" name="period" value={range} onValueChange={setRange} maxRangeDays={90} apply="confirm" />;

presetRange(preset, today) hazır bir aralığın tarihlerini verir; sunucu tarafında aynı dönemi hesaplamak için kullanın.

Özellikler

labelZorunlu

Açıklama: Görünen etiket; iki tarih grubunu 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 ters, çok uzun ya da aralık dışı 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: Aralık zorunludur: etiket işaretlenir ve parçalar aria-required bildirir.
Tür: boolean
Varsayılan: false

value

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

defaultValue

Açıklama: Kontrolsüz alanın ilk aralığı.
Tür: DateRange

onValueChange

Açıklama: İki tarih tamamlanıp sıralı olunca aralıkla, biri silinince null ile çağrılır.
Tür: (value: DateRange | 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

maxRangeDays

Açıklama: İki uç dahil en uzun aralık, gün olarak. Daha uzun aralık mesaj gösterir, daha uzun hazır aralıklar devre dışı kalır.
Tür: number

presets

Açıklama: Takvimin yanındaki hazır aralıklar. false gizler; dizi seçer ve sıralar.
Tür: boolean | readonly DateRangePreset[]
Varsayılan: true

apply

Açıklama: instant seçilen aralığı hemen uygular; confirm Uygula ve Vazgeç düğmeleri ekler.
Tür: 'instant' | 'confirm'
Varsayılan: 'instant'

size

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

readOnly

Açıklama: Aralık 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 aralığı ISO 8601 aralığı olarak alır: YYYY-MM-DD/YYYY-MM-DD.
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-range-picker": kök öğe üzerinde.
data-part: label, box, segments, trigger, popup, presets, calendar, grid, footer, description, error.
Gün düğmesinde data-selected (uçlar) ve data-in-range (ara günler ve önizleme).