MonthPicker

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

MonthPicker.tsx

Storybook

MonthPicker · Playground

MonthPicker, @bigbang/ui paketindedir. Değer tipi YearMonth olarak dışa açılır.

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

<MonthPicker label="Ekstre dönemi" name="period" max={{ year: 2026, month: 10 }} value={value} onValueChange={setValue} />;

Özellikler

labelZorunlu

Açıklama

Alanın görünen etiketi.

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

Verildiğinde alan geçersiz işaretlenir ve ileti tetikleyiciyle okunur.

Tür

string

invalid

Açıklama

Alanı iletisiz geçersiz işaretler.

Tür

boolean

Varsayılan

false

required

Açıklama

Ay seçimi zorunludur; etikete * eklenir.

Tür

boolean

Varsayılan

false

value

Açıklama

Kontrollü değer. onValueChange ile birlikte verin.

Tür

YearMonth | null

defaultValue

Açıklama

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

Tür

YearMonth

onValueChange

Açıklama

Seçilen ayla çağrılır.

Tür

(value: YearMonth) => void

min

Açıklama

Seçilebilecek en erken ay.

Tür

YearMonth

max

Açıklama

Seçilebilecek en geç ay.

Tür

YearMonth

isMonthUnavailable

Açıklama

Aralık içinde seçilemeyecek aylar, örneğin kapanmış dönemler.

Tür

(value: YearMonth) => boolean

placeholder

Açıklama

Ay seçilmemişken tetikleyicide görünen metin. Verilmezse ui.month-picker.placeholder ("Ay seçin" ya da "Choose a month").

Tür

string

size

Açıklama

Tetikleyici yüksekliği: Select gibi 32, 36 ya da 40 px.

Tür

'sm' | 'md' | 'lg'

Varsayılan

'md'

readOnly

Açıklama

Değeri gösterir ama seçiciyi açmaz.

Tür

boolean

Varsayılan

false

disabled

Açıklama

Alanı devre dışı bırakır.

Tür

boolean

Varsayılan

false

name

Açıklama

Alan adı; gizli bir alan ayı YYYY-MM olarak 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="month-picker": kök öğede.
• data-part: trigger, popup, panel, header, title, grid.
• Hücrede data-selected ve data-current.