Kiritiş · compound
Sana oraliği
Boşlaniş–tugaş davri: bitta tugma-maydon, popover'da çapda tayyor oraliqlar (Bugun, Keça, Oxirgi 7 kun, Şu oy, Ötgan oy), öngda 2 oylik kalendar (birinçi bosiş — boşi, ikkinçisi — oxiri, orasi hoverda körinadi). Qöllaş bosilganda qiymat yoziladi, Bekor — özgarişsiz. Nisbiy oraliq va avto yangilaş (4.102): data-relative="15m 1h 24h 7d" — röyxat boşida «Oxirgi 15 daqiqa / 1 soat / 24 soat / 7 kun»; qöllanganda qiymat «now-15m» / «now» (har safar qayta hisoblanadi, hodisada hisoblangan from/to ISO). data-refresh="off|10s|30s|1m|5m" — maydon yonida «Yangilaş» tanlovi; yoqilsa har N soniyada «fx-range-refresh» (sahifa yaşirin bölsa töxtaydi) va «Jonli · har 30 s» yozuvi. Monitoring, loglar, sotuv paneli uçun.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-relative | 15m 1h 24h 7d nisbiy variantlar: 5m 15m 30m 1h 6h 24h 7d 30d | — |
data-refresh | off10s30s1m5m | off |
Anatomiya
- root
.fx-daterangeşart - trigger
.fx-daterange__triggerşart - text
.fx-daterange__textixtiyoriy - popover
.fx-daterange__popşart - body
.fx-daterange__bodyixtiyoriy - presets
.fx-daterange__presetsixtiyoriy - preset
.fx-daterange__presetixtiyoriy - separator
.fx-daterange__sepixtiyoriy - refresh
.fx-daterange__refreshixtiyoriy - live
.fx-daterange__liveixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| ↑ ↓ | Tayyor oraliqlar orasida |
| Home / End | Birinçi / oxirgi oraliq |
| Enter | Oraliqni tanlaydi (kalendarda — kunni) |
| Esc | Yopadi, özgariş saqlanmaydi |
Presetlar role=listbox (↑ ↓ Home End, roving tabindex), tanlangani aria-selected va ✓. Kalendar — APG töri. Qöllaş faqat boşi va oxiri tanlangaç faol. Natija yaşirin inputlarda (<name>_dan, <name>_gacha), ISO.
Naqş: WAI-ARIA APG listbox · rol dialog
Kod
AI uçun: qaçon işlatiladi
- Hisobot, tahlil, filtr davri.
- Tayyor oraliqlar tez-tez kerak bölganda.
- Bitta sana →
datepicker - Faqat kalendarni sahifada körsatiş →
calendar - Presetlar içida 6–7 tadan köp variant bermang — data-presets bilan kerakligini tanlang.
- Kalendar içiga data-fx-calendar bermang — xulq özi ulaydi.
- Avto yangilaşni standart yoqib qöymang — foydalanuvçi özi tanlasin (server yuki, trafik).
- Nisbiy oraliqni «01.10 – 17.10» deb saqlamang — «now-24h» saqlanadi, aks holda ertaga eskirgan davr oçiladi.
npx foxui add daterange
<div class="fx-field">
<label class="fx-label" id="dr1-l">Hisobot davri</label>
<div class="fx-daterange" data-fx-daterange data-name="davr" data-value="2026-10-01/2026-10-17">
<button type="button" class="fx-input fx-daterange__trigger" popovertarget="dr1-pop" aria-labelledby="dr1-l dr1-t"><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><span class="fx-daterange__text" id="dr1-t" data-empty="Davrni tanlang"></span></button>
<div class="fx-popover fx-daterange__pop" popover id="dr1-pop">
<div class="fx-daterange__body">
<div class="fx-daterange__presets"></div>
<div class="fx-calendar" data-mode="range" data-months="2"></div>
</div>
<div class="fx-popover__actions">
<button type="button" class="fx-btn" data-act="cancel">Bekor</button>
<button type="button" class="fx-btn" data-variant="primary" data-act="apply">Qöllaş</button>
</div>
</div>
</div>
</div>
<!-- Nisbiy oraliq + avto yangilash (4.102): monitoring paneli -->
<div class="fx-field">
<label class="fx-label" id="dr2-l">Server xatolari — davr</label>
<div class="fx-daterange" data-fx-daterange data-name="davr2" data-relative="15m 1h 24h 7d" data-presets="bugun kecha 7" data-value="now-1h/now" data-refresh="30s">
<button type="button" class="fx-input fx-daterange__trigger" popovertarget="dr2-pop" aria-labelledby="dr2-l dr2-t"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M10 5.5V10l3 2M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="fx-daterange__text" id="dr2-t" data-empty="Davrni tanlang"></span></button>
<div class="fx-popover fx-daterange__pop" popover id="dr2-pop">
<div class="fx-daterange__body"><div class="fx-daterange__presets"></div><div class="fx-calendar" data-mode="range" data-months="1"></div></div>
<div class="fx-popover__actions"><button type="button" class="fx-btn" data-act="cancel">Bekor</button><button type="button" class="fx-btn" data-variant="primary" data-act="apply">Qöllaş</button></div>
</div>
</div>
</div>Tokenlar: --fx-bg-brand-subtle --fx-bg-field --fx-bg-muted --fx-border-color-default --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-control-h-sm --fx-duration-pulse --fx-ease-standard --fx-fg-success --fx-font-size-sm --fx-font-size-xs --fx-font-weight-semibold --fx-motion-fast --fx-motion-instant --fx-motion-press --fx-radius-circle --fx-radius-control --fx-size-icon-md --fx-size-status-dot-sm --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-8 --fx-text-primary --fx-text-secondary --fx-text-tertiary