Kiritiş · compound
Sana tanlagiç
Sana maydoni + kalendar tugmasi: yozib ham, kalendardan ham tanlanadi. Kalendar popover'da oçiladi (↓ yoki tugma), kun tanlansa maydon töladi va yopiladi, Esc yopadi. Footerda Tozalaş va Bugun. Tayyor sanalar va tabiiy til (4.101): popover çap tomonida «Bugun · Ertaga · Keyingi duşanba» (yonida sana), data-natural bilan maydonga «ertaga 15:00», «3 kundan keyin», «keyingi juma», «25-oktabr» yoziş mumkin — ostida taxmin çiqadi, Enter qabul qiladi.
Anatomiya
- root
.fx-datepickerşart - popover
.fx-datepicker__popşart - body
.fx-datepicker__bodyixtiyoriy - presets
.fx-datepicker__presetsixtiyoriy - preset
.fx-datepicker__presetixtiyoriy - preset-date
.fx-datepicker__preset-dateixtiyoriy - guess
.fx-datepicker__guessixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| ↓ | Kalendarni oçadi |
| Esc | Yopadi, fokus maydonga qaytadi |
| Enter | Kunni tanlaydi (kalendarda) |
| ↑ ↓, Home, End | Tayyor sanalar röyxatida yuriş |
| Enter (maydonda, soʻz yozilgan boʻlsa) | Tabiiy tildagi sanani qabul qiladi |
Tugma aria-haspopup=dialog va aria-expanded; popover role=dialog. ↓ matn maydonida kalendarni oçadi, Esc yopadi va fokus qaytadi. Yozib kiritiş ham işlaydi.
Naqş: WAI-ARIA APG dialog-modal · rol dialog
Kod
AI uçun: qaçon işlatiladi
- Bitta sana tanlaş (uçraşuv, muddat, bron).
- Yozib ham, bosib ham kiritiş kerak.
- Boşlaniş–tugaş davri →
daterange - Faqat oy yoki yil →
calendar - Içki kalendarga data-fx-calendar bermang — min/max/öçirilgan kunlarni maydondan oladi, xulq özi ulaydi.
- Davr uçun ikkita datepicker qöymang — fx-daterange.
- Tabiiy tilni yagona yöl qilmang — KK.OO.YYYY va kalendar ham işlaydi; taxmin har doim matn bilan körsatilsin.
npx foxui add datepicker
<div class="fx-field">
<label class="fx-label" for="dp1">Uçraşuv sanasi</label>
<div class="fx-datepicker" data-fx-datepicker>
<span class="fx-input-group fx-dateinput" data-fx-dateinput data-min="2026-10-17" data-off-days="7" data-value="2026-10-24">
<input class="fx-input-group__control" id="dp1" name="uchrashuv">
<button class="fx-input-group__btn" type="button" popovertarget="dp1-pop" aria-label="Kalendarni oçiş"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M5 3v2M15 3v2M3.5 8h13M5 5h10a1.5 1.5 0 0 1 1.5 1.5v8A1.5 1.5 0 0 1 15 16H5a1.5 1.5 0 0 1-1.5-1.5v-8A1.5 1.5 0 0 1 5 5z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
</span>
<div class="fx-popover fx-datepicker__pop" popover id="dp1-pop">
<div class="fx-calendar" data-footer="today clear"></div>
</div>
</div>
</div>
<div class="fx-field">
<label class="fx-label" for="dp2">Qönğiroq qiliş sanasi</label>
<div class="fx-datepicker" data-fx-datepicker data-natural data-presets="bugun ertaga indinga dushanba hafta oy">
<span class="fx-input-group fx-dateinput" data-fx-dateinput data-min="2026-10-01" data-off-days="7">
<input class="fx-input-group__control" id="dp2" name="qongiroq">
<button class="fx-input-group__btn" type="button" popovertarget="dp2-pop" aria-label="Kalendarni oçiş"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M5 3v2M15 3v2M3.5 8h13M5 5h10a1.5 1.5 0 0 1 1.5 1.5v8A1.5 1.5 0 0 1 15 16H5a1.5 1.5 0 0 1-1.5-1.5v-8A1.5 1.5 0 0 1 5 5z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
</span>
<p class="fx-datepicker__guess"></p>
<div class="fx-popover fx-datepicker__pop" popover id="dp2-pop">
<div class="fx-datepicker__body"><div class="fx-datepicker__presets"></div><div class="fx-calendar" data-footer="today clear"></div></div>
</div>
</div>
</div>Tokenlar: --fx-bg-brand-subtle --fx-bg-muted --fx-border-color-default --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-control-h-sm --fx-ease-standard --fx-font-size-sm --fx-font-size-xs --fx-font-weight-semibold --fx-motion-fast --fx-motion-instant --fx-motion-press --fx-radius-control --fx-space-1 --fx-space-12 --fx-space-3 --fx-space-4 --fx-space-8 --fx-text-brand --fx-text-disabled --fx-text-error --fx-text-primary --fx-text-secondary --fx-text-tertiary