Dijital bir dünyada randevu alırken, uçak bileti bakarken veya sadece bir alarm kurarken aslında hepimiz aynı sessiz kahramanla etkileşime giriyoruz: Date Picker (Tarih Seçici). Bir arayüzün “zaman makinesi” olan bu bileşen, karmaşık tarih formatlarını kullanıcı için basit, dokunulabilir ve sezgisel bir deneyime dönüştürür.

Doğru tasarlanmış bir tarih seçici, sadece bir takvim değil; kullanıcının planlarını hatasız ve hızlı bir şekilde hayata geçirmesini sağlayan bir köprüdür.

Date Picker Nedir? Zamanın Dijital Anatomisi

Date Picker, kullanıcıların tek bir tarih veya belirli bir tarih aralığını seçmesine olanak tanıyan bir arayüz öğesidir. Çoğu zaman bu bileşene, hassas planlamalar için bir Time Picker (Saat Seçici) de eşlik eder.

Seçilecek tarihin formatı (gün/ay/yıl veya ay/gün/yıl gibi) tasarımın merkezini oluşturur. Modern UI dünyasında karşımıza beş ana formda çıkarlar: Takvimler, Kaydırma Tekerlekleri, Gün Listeleri, Gün Anahtarları (Toggles) ve Karolar (Tiles).

Ne Zaman Date Picker Kullanmalı? (Ve Ne Zaman Kaçınmalı?)

Zaman yönetimi her ne kadar kritik olsa da, her senaryoda dev bir takvim açmak kullanıcıyı yorabilir.

İdeal Kullanım Senaryoları:

• Esnek Tarih Seçimi: Kullanıcının geniş bir zaman dilimi içinde özgürce seçim yapması gerektiğinde (Örn: Otel rezervasyonu).
• Kesinlik Gerektiren Girişler: Randevu saati veya etkinlik günü gibi hata payı olmayan durumlar.
• Format Hatalarını Önleme: Kullanıcının tarihi yanlış formatta (Örn: 12/13/2026 gibi geçersiz bir ay) girmesini engellemek istediğinizde.

Kaçınılması Gereken Durumlar:

• Kısıtlı Seçenekler: Sadece 2-3 gün arasından seçim yapılacaksa, bir takvim yerine Radio Button veya Dropdown kullanmak çok daha hızlıdır.
• Hızlı Manuel Giriş: Doğum tarihi gibi kullanıcının ezbere bildiği bilgilerde, tekerleği döndürmek yerine doğrudan sayıları yazmasına izin vermek (Text Input) daha az zahmetlidir.
• Kısıtlı Ekran Alanı: Eğer ekran çok küçükse ve takvim arayüzü boğuyorsa, sade metin girişleri tercih edilmelidir.

Tasarım Varyasyonları: Hangisi Sizin Projeniz İçin Uygun?

Mobbin üzerinde yapılan 1.000’den fazla inceleme, tarih seçicilerin kullanım amacına göre nasıl şekillendiğini gösteriyor:

1. Takvim Görünümü (Calendar)

En sezgisel formdur. Özellikle Airbnb veya Booking.com gibi seyahat uygulamalarında, başlangıç ve bitiş tarihlerini (tarih aralığı) seçmek için rakipsizdir. Kullanıcı görsel olarak haftanın hangi gününe denk geldiğini anında anlar.

2. Tarih ve Saat Tekerlekleri (Wheel Picker)

Özellikle mobil cihazlarda (iOS yerel tasarımı gibi) popülerdir. Doğum tarihi seçerken veya alarm kurarken başparmakla yapılan o hızlı kaydırma hareketi, “Native Date Picker” hissini en iyi veren yapıdır.

3. Karo Formatı (Tiles)

Uber Eats veya Getir gibi teslimat uygulamalarında sıkça görülür. Kullanıcıya “Yarın”, “Bugün” veya belirli saat dilimlerini tıklanabilir kutucuklar halinde sunarak bilişsel yükü en aza indirir. Hızlı karar verme anları için mükemmeldir.

4. Gün Anahtarları ve Listeler (Day Toggle & List)

Haftalık planlamalar veya hatırlatıcılar için kullanılır. Günleri yan yana butonlar halinde sunarak tek dokunuşla seçim yapma imkanı tanır.

Date Picker Bileşeninin Anatomisi

Kullanışlı bir tarih seçici şu yedi parçadan oluşur:

1. Etiket (Label): Giriş alanının ne olduğunu belirtir.
2. Metin Alanı (Text Field): Seçilen tarihin yazılı olduğu alan.
3. Takvim Gövdesi: Günlerin dizildiği ana ızgara.
4. Ay/Yıl Navigasyonu: Geçmişe veya geleceğe gitmeyi sağlayan butonlar.
5. Hafta İçi Etiketleri: Günlerin isimleri (Pzt, Sal…).
6. Seçilmemiş Günler: Aktif olmayan veya seçilebilir haldeki boş günler.
7. Seçili Gün: Kullanıcının tıkladığı vurgulanmış tarih.

Avantajlar ve Dezavantajlar

Avantajları:

• Hata Payını Sıfırlar: Kullanıcının takvimde olmayan bir günü (Örn: 30 Şubat) seçmesini engeller.
• Bağlamsal Bilgi: Kullanıcının tarihin hangi güne (hafta sonu mu, iş günü mü) denk geldiğini görmesini sağlar.
• Görsel Hız: Okumak yerine görmeyi sağlayarak işlemi hızlandırır.

Dezavantajları:

• Karmaşıklık: Kötü tasarlanmış takvimler mobil ekranda tıklama hatalarına (fat finger) yol açabilir.
• Yükleme Süresi: Çok fonksiyonel takvim bileşenleri uygulamanın açılış hızını etkileyebilir.

Kritik Karışıklık: Date Picker vs. Tabs

Her takvim görünümü bir “Date Picker” değildir. Eğer bir takvim satırı sadece içeriği organize etmek için (Örn: Bir astroloji veya günlük uygulamasında geçmiş kayıtlara bakmak için) kullanılıyorsa, bu bir Tab (Sekme) veya navigasyon öğesidir. Bir bileşenin “Date Picker” sayılması için bir form girişi (Input) görevi görmesi şarttır.