Kuika’nın Date Range elementi, kullanıcıların başlangıç ve bitiş tarihlerini aynı anda seçmesini sağlayan bir bileşendir. Bu özellik, rezervasyon sistemleri, proje planlamaları ve raporlama ekranları gibi tarih aralığına ihtiyaç duyulan her yerde güvenilir bir çözüm sunar.

Date Range elementi hem web hem de mobil uygulamalarda desteklenir.

Kullanım Alanları

• Otel rezervasyonu veya uçuş arama ekranlarında tarih aralığı seçimi,
• Proje planlamalarında görev başlangıç ve bitiş tarihleri,
• Raporlama ekranlarında filtreleme (örn. 01.09.2025 – 07.09.2025 arası),
• Kampanya ve indirim geçerlilik süreleri vb. 

Uçuş Dönemi Seçimi Kullanım Senaryosu

1. Statik Kullanım Senaryosu – Sabit Tarih Aralığı

Bir uçak bileti rezervasyon uygulamasında kullanıcıların belirli bir tarih aralığında veri görmesi gerekir. Statik kullanımda tarih aralığı sabit atanır, kullanıcı değiştiremez.

Özelliklerin Kullanımı

• Start Value → 2023-11-15
• End Value → 2023-12-08
• Start Date Placeholder → “Başlangıç Tarihini Seçin”
• End Date Placeholder → “Bitiş Tarihini Seçin”
• Format → DD/MM/YYYY → 15/11/2023 – 08/12/2023
• AllowClear → Kullanıcı isterse seçimleri sıfırlayabilir

Senaryo Adımı Tamamlandığında

• Kullanıcıya sabit tarih aralığı atanır.
• Tarihler formatlı şekilde ekranda görünür.
• İstenirse (X) butonuyla seçim temizlenebilir.
• Sistem yalnızca bu sabit aralığa ait verileri getirir.

Dinamik Kullanım Senaryosu – Raporlama Tarih Aralığı

Bir finans raporlama uygulamasında kullanıcı tarih aralığını seçerek raporlarını filtreler. Tarihler veri kaynağına bağlanır.

Veri Kaynağı Bağlama

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

• Ardından SQL Actions’a tıklayın ve aksiyona “Reports” ismini verin. C# ile de oluşturabilirsiniz.
• Aşağıdaki SQL komutunu girin. 

SELECT     ReportName,    StartDate,    EndDate,    TotalRevenue,    TotalExpenseFROM ReportsWHERE StartDate >= '2025-09-01' AND EndDate <= '2025-09-30'ORDER BY StartDate ASC;

UI Design Modülü işlemleri

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

Özelliklerin Kullanımı

• Start Value → Reports.StartDate (Symbol Picker’dan bağlanır)
• End Value → Reports.EndDate (Symbol Picker’dan bağlanır)
• Start Date Placeholder → “Başlangıç Tarihini Seçin”
• End Date Placeholder → “Bitiş Tarihini Seçin”
• Format → DD/MM/YYYY
• AllowClear → Kullanıcı seçimi sıfırlayabilir

Senaryo Adımı Tamamlandığında

• Kullanıcı başlangıç ve bitiş tarihini takvimden seçer.
• Seçilen aralık formatlı şekilde ekrana yansır.
• Kullanıcı isterse (X) butonuyla aralığı temizleyebilir.
• Tarihler Reports.StartDate ve Reports.EndDate alanlarına kaydedilir.
• Sistem, bu aralığa göre raporları filtreler.

Kısıtlamalar

• Çok geniş tarih aralıkları performansı etkileyebilir (ör. yıllar arası filtrelemelerde).

İpuçları ve Best Practices

• Geçmiş tarihleri kısıtlamak için Start Value ve End Value üzerinde kontrol ekleyin.
• Kullanıcı deneyimi için mutlaka placeholder metinleri ekleyin.
• Raporlama senaryolarında varsayılan tarih aralığını bu hafta ya da son 30 gün olarak belirleyebilirsiniz.