Kiritiş · compound
Kalendar
Oy töri: kun tanlaş, oraliq (2 oy yonma-yon), oy va yil körinişi. Hafta Duşanbadan, oy va kun nomlari özbekça. Bugun — halqa, tanlangan — töldirilgan, öçirilgan kun — çizilgan, oraliq — tasma. APG sana töri klaviaturasi; xulq foxui.js'da çizadi. Içida fx-datepicker va fx-daterange işlatiladi. Bir neçta sana (4.99): data-mode="multiple" — dam oliş kunlari, smenalar: har kun bosilganda qöşiladi yoki olinadi, pastda «N kun tanlandi». Hafta raqamlari (4.98): data-weeknums — çapda ISO hafta raqami (sprint, iş rejasi). Yil va ön yillik (4.100): data-mode="year" — faqat yil tanlanadi (qiymat «2026»); data-level="decade|year|month" — boşlanğiç köriniş: tuğilgan sanani ön yilliklardan (1990–1999) → yil → oy → kun tez tanlaş. Yillar sarlavhasi bosilsa — ön yilliklar (120 yil).
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-mode | single bitta sanarange boşlaniş–tugaşmonth faqat oy (hisobot davri)multiple Bir neçta alohida kun; change → detail.valuesyear faqat yil (qiymat «2026») | single |
data-size | mdsm | md |
data-weeknums | | — |
data-level | decade ön yilliklardan boşlaşyear yillardanmonth oylardan | day |
Anatomiya
- root
.fx-calendarşart - head
.fx-calendar__headixtiyoriy - title
.fx-calendar__titleixtiyoriy - nav
.fx-calendar__navixtiyoriy - grid
.fx-calendar__gridixtiyoriy - dow
.fx-calendar__dowixtiyoriy - cell
.fx-calendar__cellixtiyoriy - day
.fx-calendar__dayixtiyoriy - foot
.fx-calendar__footixtiyoriy - weeknum
.fx-calendar__wkixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| ← → | Oldingi/keyingi kun |
| ↑ ↓ | Oldingi/keyingi hafta |
| Home / End | Haftaning boşi / oxiri (Du / Ya) |
| PageUp / PageDown | Oldingi/keyingi oy |
| Shift + PageUp / PageDown | Oldingi/keyingi yil |
| Enter / Boʻshliq | Kunni tanlaydi |
| Esc | Oy/yil körinişidan kunlarga qaytadi |
| ← → ↑ ↓ (oʻn yilliklarda) | 10 / 30 yil; PageUp/PageDown — 120 yil |
APG Date Picker: role=grid, har kun tugma (aria-label «17-oktyabr 2026, şanba»), aria-selected hujayrada, aria-current=date bugunda; roving tabindex. Öçirilgan kun aria-disabled (fokus oladi). Sarlavha aria-live=polite.
Naqş: WAI-ARIA APG grid · rol grid
Kod
AI uçun: qaçon işlatiladi
- Sanani köz bilan tanlaş, oy va hafta kunlari kontekstida.
- Hisobot davri (oraliq rejimi).
- Maydon içida sana tanlaş →
datepicker - Tayyor oraliqlar (Bugun, 7 kun) bilan davr tanlaş →
daterange - Faqat soat va daqiqa →
timefield - Tuğilgan sana kabi 20+ yil orqaga ketadigan sana uçun faqat kalendar qöymang — fx-dateinput (yozib kiritiş) bering.
- Öçirilgan kunni yaşirmang — sababini hint bilan yozing.
npx foxui add calendar
<div class="fx-calendar" data-fx-calendar data-value="2026-10-17" data-min="2026-10-05" data-disabled="2026-10-21" data-off-days="7" aria-label="Uçraşuv sanasi"></div> <div class="fx-calendar" data-fx-calendar data-mode="range" data-months="2" data-start="2026-10-12" data-end="2026-10-19" aria-label="Hisobot davri"></div> <div class="fx-calendar" data-fx-calendar data-mode="month" data-value="2026-10" aria-label="Hisobot oyi"></div> <div class="fx-calendar" data-fx-calendar data-mode="multiple" data-value="2026-11-02,2026-11-03,2026-11-09,2026-11-16" data-footer="clear" aria-label="Smena kunlari, noyabr"></div> <!-- Hafta raqamlari (4.98) --> <div class="fx-calendar" data-fx-calendar data-weeknums data-value="2026-10-21" aria-label="Sprint rejasi — hafta raqamlari bilan"></div> <!-- Yil (4.100): faqat yil --> <div class="fx-calendar" data-fx-calendar data-mode="year" data-value="2024" data-max="2026-12-31" data-footer="today" aria-label="Moliyaviy yil"></div> <!-- Oʻn yilliklardan boshlab: tugʻilgan sana --> <div class="fx-calendar" data-fx-calendar data-level="decade" data-value="1994-05-12" data-max="2008-12-31" aria-label="Tuğilgan sana"></div>
Tokenlar: --fx-bg-brand-solid --fx-bg-brand-subtle --fx-bg-muted --fx-bg-pressed --fx-border-color-default --fx-border-color-focus --fx-border-color-strong --fx-border-width-default --fx-border-width-focus --fx-control-h-md --fx-control-h-sm --fx-ease-standard --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-regular --fx-font-weight-semibold --fx-knob-pill --fx-motion-base --fx-motion-fast --fx-motion-instant --fx-motion-press --fx-radius-control --fx-size-icon-md --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-6 --fx-text-disabled --fx-text-on-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary