Bileşenler

Date Picker

Bir ay ızgarasından bir gün ya da gün aralığı seçtirir. Calendar yalın aydır; DatePicker bir ya da iki ayı, hızlı aralıklarla birlikte bir panele koyar.

TasarımcıGeliştirici

Figma’da aç

Playground

Ekim 2026

Seçilen: 29 Eki 2026

Tip Aralık Etkinlikler Hafta pazartesi başlar

Figma varyantı

Date Picker
🎛 Type=Default

Date Day
Type=Day, Event

Gün durumları

Bugünün primary halkası, seçili günün primary dairesi, hover edilen günün secondary dairesi vardır. Diğer ayların günleri ve seçilemeyen günler medium-emphasis’tir. Aralık, başından sonuna primary soft bir bant çizer. Etkinlik, sayının altına bir nokta ekler.

Day	Circle	Text
default	`—`	`--color-foreground-level-1`
today	`--color-primary ring`	`--color-primary`
hover	`--color-secondary`	`--color-on-secondary`
selected	`--color-primary`	`--color-on-primary`
range middle	`--color-primary-soft band`	`--color-foreground-high-emphasis`
disabled / other month	`—`	`--color-foreground-medium-emphasis`
disabled selected	`--color-surface-level-3`	`--color-foreground-medium-emphasis`
event dot	`--color-primary (selected: --color-on-primary)`	`—`

Tokenlar

Part	Token
Day cell / circle	`48px / 32px (--space-xxlarge)`
Panel	`--color-surface-level-1, --radius-layout-base, --shadow-depth-2xl`
Panel padding	`--space-medium + --space-tiny`

Figma notları

Gün ve ay metinleri bağlı olmayan 12/16 HK Grotesk Medium stilini kullanıyor; kod ui/text small/regular kullanır.
Figma’da gün adları yok; kod bunun yerine her güne ekran okuyucular için tam tarihini label olarak verir.
Ay ızgarası beş hafta; kod, ayın gerektirdiği kadar beş ya da altı hafta gösterir.
Figma’da Recurring End bandı y 8 yerine y 40’ta; kod onu Recurring Start’ın aynası olarak çizer.
Date Month Type=Hover’ın (ay/yıl butonu) Figma’da bir seçicisi yok; kod başlığı metin olarak gösterir.
Controls okları placeholder ikonlar; kod arrow-left ve arrow-right kullanır.
Date Filter kullanımdan kalkmış Cell’i kullanıyor; kod Cell Small kullanır.
Panel gölgesi primitive Depth 2XL efekti; kod --shadow-depth-2xl kullanır.

Figma’dan koda

Figma	React
Date Picker 🎛 Type = Basic	`<Calendar />`
Date Picker 🎛 Type = Default	`<DatePicker />`
Date Picker 🎛 Type = Full Control	`<DatePicker mode="range" months={2} presets={…} />`
Date Day Type = Today / Event	`today / events={[…]}`
Date Day Type = Recurring Start / Recurring / Recurring End	`mode="range"`
Date Day Disabled	`min / max / isDateDisabled`