Kuika’nın Date elementi, kullanıcıların tarih seçimini kolaylaştıran bir giriş elementtir. Kullanıcılar manuel olarak tarih girebilir veya takvim üzerinden seçim yapabilir. Tarih tabanlı doğrulamalar ve kısıtlamalar ekleyerek form ve süreçlerde güvenilir veri toplamanızı sağlar.

Date elementi hem web hem de mobil uygulamalarda desteklenir.

Kullanım Alanları

• Rezervasyon ve randevu sistemleri,
• Formlarda doğum tarihi veya teslim tarihi seçimi,
• Fatura veya sipariş oluşturma ekranlarında tarih belirleme,
• Proje planlama ve zamanlama uygulamaları vb. 

Randevu Tarihi Seçimi

Statik Kullanım Senaryosu – Randevu Tarihi

Bir seyahat rezervasyonu uygulamasında kullanıcıların yalnızca ileri tarihleri seçebilmesi gerekir. Date elementi, kullanıcıya bir tarih seçici sunar ve belirlenen tarih rezervasyon için kayıt altına alınır.

Veri Kaynağı Bağlama

Statik kullanımda SQL veya tabloya gerek yoktur. Tarih doğrudan element üzerinden atanır.

• Value alanına bugünün tarihi (Today) atanır.
• DisableBeforeDate özelliği ile geçmiş tarihler kapatılır.
• Placeholder “Randevu Tarihi Seçin” olarak belirlenir.
• AllowClear etkinleştirilirse kullanıcı seçimini sıfırlayabilir.

Özelliklerin Senaryo Bağlamında Kullanılması

• Value → Başlangıç tarihi bugünün tarihi atanır.
• Placeholder → “Randevu Tarihi Seçin” kullanıcıya yol gösterir.
• AllowClear → Tek tıkla seçimi temizleme imkanı verir.
• Format → DD/MM/YYYY olarak ayarlanır.
• DisableBeforeDate → Geçmiş tarihler kapatılır.
• DisabledDays → Tatil günleri kapatılabilir.
• Return Display Value (Web only) → Tarih ekranda göründüğü formatta döner.

Senaryo Adımı Tamamlandığında

• Kullanıcı sadece ileri tarihleri seçebilir.
• Seçilen tarih formatlı şekilde ekrana yansır.
• Kullanıcı isterse tarihi temizleyebilir.
• Seçilen tarih, rezervasyon işlemine aktarılır.

Dinamik Kullanım Senaryosu – Sipariş Teslimat Tarihi

Bir e-ticaret uygulamasında siparişlerin teslimat tarihleri yönetilir. Kullanıcı yeni sipariş oluştururken teslimat tarihini seçer, sistem bu tarihi veri tablosuna kaydeder.

Veri Kaynağı Bağlama

• Datasources modülüne gidin.
• Ardından Tables başlığı yanındaki + ikonuna tıklayın ve tabloya Orders ismini verin.
• Aşağıdaki tabloyu oluşturun:

• Ardından SQL Actions’a tıklayın ve aksiyona “Orders” ismini verin.
• Aşağıdaki SQL komutunu girin. 

SELECT     CustomerName,    DeliveryDate,    StatusFROM OrdersWHERE DeliveryDate >= CAST(GETDATE() AS DATE)ORDER BY DeliveryDate ASC;

• Alternatif olarak C# ile de tabloyu oluşturabilirsiniz.

UI Design Modülü işlemleri

• Uygulama ekranında sağ kenarda bulunan Add Action butonuna tıklayın. 
• Ardından Custom > Orders’ı seçin. 

Özelliklerin Senaryo Bağlamında Kullanılması

• Value → Symbol Picker üzerinden Orders.DeliveryDate alanına bağlanır.
• Placeholder → “Teslimat Tarihi Seçin”.
• AllowClear → Kullanıcı isterse sıfırlayabilir.
• Format → DD/MM/YYYY.
• DisableBeforeDate → Bugünden önceki tarihler kapatılır.
• DisabledDays → Tatil günleri ya da teslimat yapılmayan günler kapatılabilir.

Senaryo Adımı Tamamlandığında

• Kullanıcı yalnızca ileri tarihleri seçebilir.
• Seçilen tarih Orders.DeliveryDate alanına kaydedilir.
• Tarih doğru formatta ekrana yansır.
• İlgili iş akışında (örn. teslimat planlama) otomatik kullanılır.

Kısıtlamalar

• Disabled Days ve Return Display Value yalnızca web uygulamalarda çalışır.

İpuçları ve Best Practices

• Kullanıcı deneyimi için her zaman Placeholder ekleyin.
• Geçmiş tarihlerin seçilmesini önlemek için Disable Before Date özelliğini kullanın.
• Tatil günleri, bakım günleri gibi özel tarihleri Disabled Days ile devre dışı bırakın.
• Uluslararası projelerde tarih formatını bölgesel standartlara uygun ayarlayın.