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