DateTimePicker

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

DateTimePicker.tsx

Storybook

DateTimePicker · Playground

DateTimePicker, @bigbang/ui paketindedir. Değer tipi CalendarDateTime ve parseDateTime de aynı paketten dışa açılır.

import { DateTimePicker, type CalendarDateTime } from '@bigbang/ui';

<DateTimePicker label="Gönderim zamanı" name="sendAt" minDate={today} value={value} onValueChange={setValue} />;

Özellikler

labelZorunlu

Açıklama

Alanın tamamının adı; grubun lejantı olarak gösterilir.

Tür

string

description

Açıklama

İki bölümün altındaki yardım metni; gruba aria-describedby ile bağlanır.

Tür

ReactNode

error

Açıklama

Verildiğinde iki bölüm de geçersiz işaretlenir ve ileti grupla okunur.

Tür

string

invalid

Açıklama

İki bölümü iletisiz geçersiz işaretler.

Tür

boolean

Varsayılan

false

required

Açıklama

Tarih ve saat zorunludur; iki etikete de * eklenir.

Tür

boolean

Varsayılan

false

value

Açıklama

Kontrollü değer. onValueChange ile birlikte verin.

Tür

CalendarDateTime | null

defaultValue

Açıklama

Kontrolsüz alanın başlangıç değeri.

Tür

CalendarDateTime

onValueChange

Açıklama

İki bölüm de tamamlanınca tarih ve saatle, biri silinince null ile çağrılır.

Tür

(value: CalendarDateTime | null) => void

minDate

Açıklama

Seçilebilecek en erken gün.

Tür

CalendarDate

maxDate

Açıklama

Seçilebilecek en geç gün.

Tür

CalendarDate

isDateUnavailable

Açıklama

Aralık içinde seçilemeyecek günler.

Tür

(date: CalendarDate) => boolean

withSeconds

Açıklama

Saate saniye bölümü ekler.

Tür

boolean

Varsayılan

false

dateLabel

Açıklama

Tarih bölümünün etiketi. Verilmezse ui.date-time-picker.date ("Tarih" ya da "Date").

Tür

string

timeLabel

Açıklama

Saat bölümünün etiketi. Verilmezse ui.date-time-picker.time ("Saat" ya da "Time").

Tür

string

size

Açıklama

İki bölümün yüksekliği: DatePicker ve TimeField gibi 32, 36 ya da 40 px.

Tür

'sm' | 'md' | 'lg'

Varsayılan

'md'

readOnly

Açıklama

Değeri gösterir ama değiştirmez.

Tür

boolean

Varsayılan

false

disabled

Açıklama

İki bölümü de devre dışı bırakır.

Tür

boolean

Varsayılan

false

name

Açıklama

Alan adı; gizli bir alan değeri YYYY-MM-DDTHH:mm olarak, saniye gösteriliyorsa saniyeyle gönderir.

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-time-picker" ve hatada data-invalid: fieldset üzerinde.
• data-part: legend, row, description, error.