Form · Date picker

Takvim

Tarih alanının yanında bir takvim düğmesi. Alan yazılabilir kalır, takvim yardımcıdır.

CSS: kararlı
JavaScript: ay ızgarası ve klavye
React: kararlı
Vue: kararlı

Örnekler

Randevu tarihi Canlı örnek

Randevu tarihi

GG.AA.YYYY. Örnek: 14.09.2026

HTML kodunu göster

<div class="kiris-alan kiris-takvim" data-kiris="takvim" data-en-az="2026-09-07" data-en-cok="2026-12-31">
  <label class="kiris-etiket" for="randevu">Randevu tarihi</label>
  <p class="kiris-yardim" id="randevu-yardim">GG.AA.YYYY. Örnek: 14.09.2026</p>
  <div class="kiris-takvim__satir">
    <input class="kiris-girdi kiris-girdi--10" id="randevu" name="randevu" type="text" inputmode="numeric" autocomplete="off" aria-describedby="randevu-yardim">
    <button class="kiris-button kiris-button--ikincil kiris-takvim__ac" type="button" aria-expanded="false" aria-label="Takvimi aç"><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-date"/></svg></button>
  </div>
  <div class="kiris-takvim__panel" role="dialog" aria-label="Takvim" hidden></div>
</div>

Geçmiş bir tarih Canlı örnek

Yıl listesi 120 yıl geriye gider. Ay ve yıl tek tıklamayla değişir.

Belge tarihi

GG.AA.YYYY. Örnek: 12.03.1998

HTML kodunu göster

<div class="kiris-alan kiris-takvim" data-kiris="takvim" data-en-cok="2026-09-07">
  <label class="kiris-etiket" for="belge-tarih">Belge tarihi</label>
  <p class="kiris-yardim" id="belge-tarih-yardim">GG.AA.YYYY. Örnek: 12.03.1998</p>
  <div class="kiris-takvim__satir">
    <input class="kiris-girdi kiris-girdi--10" id="belge-tarih" name="belge_tarih" type="text" inputmode="numeric" autocomplete="off" aria-describedby="belge-tarih-yardim">
    <button class="kiris-button kiris-button--ikincil kiris-takvim__ac" type="button" aria-expanded="false" aria-label="Takvimi aç"><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-date"/></svg></button>
  </div>
  <div class="kiris-takvim__panel" role="dialog" aria-label="Takvim" hidden></div>
</div>

Ne zaman kullanılır

Kullanıcının bilmediği bir tarihi seçtirirken kullanın: randevu, gelecek bir gün.
Doğum tarihi gibi bilinen tarih için tarih girişi kullanın. Yazmak daha hızlıdır.

Erişilebilirlik

Alan tek başına çalışır. Takvim betik ile gelir ve aria-expanded taşıyan bir düğme ile açılır.
Izgara role="grid". Ok tuşları gün, Page Up ve Page Down ay, Shift ile yıl değiştirir. Enter seçer, Escape kapatır.
Ay ve yıl listesi başlıkta durur. Uzun geçmişe giden bir tarih için ok düğmesi yetmez.
Her gün düğmesi tam tarihi söyler: "14 Eylül 2026 Pazartesi". Bugün ve seçili gün yalnız renkle değil, kalın ve çerçeve ile belli olur.

Karşılanan WCAG 2.2 ölçütleri 1.3.1 2.1.1 4.1.2

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: NL, IT, JP, DK, NO, FI, US, BR, KR, CH.

Bu bileşenin kodu depoda:

Kayıt defteri tanımı, adı, özeti, kullanım kuralı ve örnekleri
CSS katmanları, kiris-date-picker ile başlayan sınıflar
Davranış betiği, data-kiris="takvim" başlatıcısı