M.AIM.AISoloLabsUI Sözlüğü · Girdi

← UI Sözlüğü

Tarih seçici date picker

bilinen diğer adları date picker · takvim seçici · tarih alanı

Böyle diyorsan: "takvim açılan kutu" · "tarih seçme takvimi" → bunun adı tarih seçici.

Mini takvim açarak tarih seçtiren alan.

Tarih seçici, bir takvim açarak tarih seçtirir. Görünürde basit, gerçekte bu sözlüğün en zor parçalarından biridir; çünkü üç ayrı sorunu birden çözmek zorundadır: biçim (05/06 hangisi gün?), kısıt (geçmiş günler, kapalı günler, aralıklar) ve klavye (takvimde ok tuşlarıyla gezinme, ay değiştirme, kapanma). Tarayıcının yerleşik seçicisi bunların hepsini bedava verir ama stili neredeyse hiç değiştirilemez; özel takvim yazmak ise APG'nin kip pencere kalıbını doğru uygulamayı gerektirir. En sık yapılan hata, elle yazmaya yarım izin vermektir: kullanıcı yazabiliyor ama biçim serbestse, yarım serbestlik yarım doğrulama demektir.

Kapsam: Bu madde tek tarih seçimini kapsar. Tarih ARALIĞI seçimi aynı kalıbın iki uçlu hâlidir ve ek kurallar getirir (başlangıç bitişi geçemez); saat seçimi ise ayrı bir parçadır.

CANLI ÖRNEK — kullan, numaralara tıkla, parçayı tanı
Randevu tarihi
10 Ağustos 2026📅
‹Ağustos 2026›
PSÇPCCP12345678910111213141516171819202122232425262728
○ bugüngeçmiş kapalı● seçili
Aşama aşama gezmek için okları ya da numaraları kullan.
YAPIM PROMPTU — AJANINA YAPIŞTIR
Randevu için tarih seçici ekle: etiketli readonly input seçimi göstersin; altında açık takvim — ‹ › ay gezinme başlığı + Türkçe gün adlarıyla 7 sütun ızgara (hafta pazartesi başlar). Geçmiş ve dolu günler kapalı (soluk + tıklanamaz), bugün halkalı, seçili gün dolu renkli; güne tıklayınca input güncellensin; min/max aralığı dışına gezinilemesin; mobilde klavye açılmasın (input readonly).
DEBUG PROMPTU — HUYSUZLANIRSA

Yapıştır, sonuna belirtiyi ekle — ajana klasik hata kalıplarını önden verir.

Tarih seçicim huysuz; şu klasikleri sırayla ele: (1) SAAT DİLİMİ kayması — seçilen gün kaydedilince bir gün geri/ileri görünüyor (yerel geceyarısı UTC'ye çevrilirken taşıyor; tarihi saatli değil 'YYYY-MM-DD' olarak sakla); (2) ayın ilk günü yanlış sütunda (hafta pazartesi mi pazar mı başlıyor karışmış); (3) geçmiş günler görselde kapalı ama API hâlâ kabul ediyor (sunucu tarafında tarih doğrulaması yok); (4) gün/ay adları İngilizce kalmış (locale verilmemiş); (5) mobilde input'a dokununca klavye açılıp takvimi itiyor (readonly değil); (6) ‹ › ile min/max aralığının dışına çıkılabiliyor. Belirti şu:
ANATOMİ — HER PARÇANIN ADI VAR (tıkla ya da üzerine gel → örnekte yansın)
  • 1Giriş alanıreadonly input + 📅

    Seçimin yazıldığı kutu ve takvimi açan tetik. İyi pratik: ya elle yazmaya tam izin ver ya tamamen kilitle — yarım serbestlik, yarım doğrulama demektir.

  • 2Ay gezinme başlığı‹ Ağustos 2026 ›

    Aylar arasında dolaşma; başlık 'takvimde neredeyim' sorusunun cevabıdır. Min/max tarih aralığının dışına gezinme kapatılır.

  • 3Gün ızgarası7 sütunlu grid

    Gün-adı başlıklarıyla hizalı 28-31 hücre; ayın ilk günü DOĞRU sütunda başlamalı (haftanın ilk günü ülkeye göre değişir — TR'de pazartesi).

  • 4Kapalı günlerdisabled

    Seçilemez tarihler: geçmiş, dolu, hafta sonu... Soluk + tıklanamaz görünür; mümkünse SEBEBİ de anlaşılır olur.

  • 5Durum işaretleribugün ○ / seçili ●

    Bugün halkalı, seçili dolu — ikisi aynı gün bile olsa ayrı dil konuşur; kullanıcı 'bugün' ile 'seçtiğim' i karıştırmaz.

DURUMLAR — HANGİ HÂLDE NE OLUR
  • AKapalıreadonly input + 📅

    Seçim yazılı, takvim gizli. Biçim belirsiz bırakılmaz: '05.06.2026' yerine tercihen '5 Haziran 2026' yaz — 05/06 dünyanın yarısında Haziran'ın beşi, yarısında Mayıs'ın altısıdır.

  • BAçıkdialog + odak tuzağı

    Takvim görünür. Kip pencere kuralları geçerlidir: odak içeride kalır, Escape kapatır, kapanınca odak tetiğe DÖNER.

  • CSeçili günaria-selected

    Seçim işaretli. Bugün ile seçili gün AYRI işaretlenmeli; ikisini aynı göstermek en sık yapılan görsel hatadır.

  • DKapalı günlerdisabled + sebep

    Geçmiş, dolu ya da tatil günleri. Neden seçilemediği yazılmazsa kullanıcı sistemin bozuk olduğunu düşünür.

  • EElle yazılıyorinput + ayrıştırma

    Kullanıcı klavyeden yazıyor. Ya tam izin ver ve esnek ayrıştır ya da tamamen kilitle; arada kalmak hem yazdırıp hem reddeden bir alan üretir.

KODDAKİ ADLARI
HTML<input type="date">tarayıcının hazır seçicisi — stili sınırlı ama bedava
react-day-pickerDayPicker (locale, disabled)esnek takvim; TR locale + kapalı-gün kuralları
shadcn/uiCalendarreact-day-picker'ın hazır giydirmesi
date-fns / dayjslocale: trgün-ay adları ve format
ERİŞİLEBİLİRLİK & SIK HATA
  • Klavyeyle tarih girilebilmeli. Yalnız fareyle takvimden seçilebilen alan, klavye kullanıcısı için kapalı kapıdır — özellikle uzak tarihlerde (doğum günü) takvimde gezinmek işkencedir.
  • Açılan takvim bir kip penceredir: odak içeride tuzaklanır, Escape kapatır, kapanınca odak tetiğe geri döner (APG kip pencere kalıbı).
  • Takvimde ok tuşları günler arasında gezmeli, PageUp/PageDown ay değiştirmeli; seçili gün ekran okuyucuya tam olarak duyurulmalı ('5 Haziran 2026, Cuma').
  • Biçim beklentisini yaz. Yardım satırında 'GG.AA.YYYY' gibi bir örnek olmadan kullanıcı tahmin eder ve hata alır.
  • Kapalı günün sebebini söyle: 'geçmiş tarih' ile 'kontenjan dolu' aynı görünmemeli.
SIK KARIŞTIRILANLAR

Kip pencereden farkı. Açılan takvim aslında bir kip penceredir ve onun bütün kurallarına uymak zorundadır: odak tuzağı, Escape ile kapanma, kapanınca odağın tetiğe dönmesi. Fark amaçtadır — kip pencere genel bir kap, tarih seçici o kabın içinde çalışan özel bir araçtır. Bu yüzden tarih seçici yazarken kip pencere kalıbını yeniden keşfetmeye çalışma, uygula.

Kip pencere sayfasına git →

Metin kutusundan farkı. Yerleşik <input type="date"> hem metin kutusu hem takvimdir: tarayıcı biçimi, doğrulamayı ve seçiciyi kendi verir. Stili değiştiremediğin için özel takvim yazarsan bu üçünü de sen üstlenirsin. Karar şu: tasarım özgürlüğü mü, bedava doğruluk mu — ikisi aynı anda mümkün değil.

Metin kutusu sayfasına git →

KAYNAKLAR
İLGİLİ PARÇALAR

Kip pencere modal / dialogMetin kutusu inputForm alanı form field

AYNI AİLEDE · GIRDI