Kuika’nın Date Time Range elementi, kullanıcıların belirli bir tarih ve saat aralığını seçmelerini sağlar. Başlangıç ve bitiş zamanlarını hem manuel girişle hem de tarih-saat seçici aracılığıyla kolayca tanımlayabilirsiniz. Bu element, rezervasyon sistemleri, vardiya planlamaları ve rapor filtrelemeleri için idealdir.

Date Time Range elementi hem web hem de mobil uygulamalarda desteklenir.

Kullanım Alanları

• Rezervasyon başlangıç ve bitiş zamanlarının belirlenmesi,
• Çalışma vardiyası planlama,
• Raporlama için tarih-saat aralığı seçimi,
• Teslimat ve hizmet sürelerinin ayarlanması vb. 

Sabit Rezervasyon Aralığı

Statik Kullanım Senaryosu 

Bir otel rezervasyon ekranında giriş ve çıkış tarih-saatleri sabit olarak atanabilir. Bu durumda kullanıcı belirlenen aralığı görür, değiştiremez.

Özelliklerin Kullanımı

• Start Value → 2023-11-01 11:00 (Varsayılan giriş tarihi-saat)
• End Value → 2023-11-11 12:00 (Varsayılan çıkış tarihi-saat)
• Start Date Placeholder → “Giriş Tarihi ve Saati”
• End Date Placeholder → “Çıkış Tarihi ve Saati”
• Format → DD-MM-YYYY HH:mm (örn. 11-11-2023 12:30)
• Allow Clear → Kullanıcı tek tıklamayla giriş/çıkış tarihlerini temizleyebilir
• Disable Before Date → Bugünden önceki giriş tarihleri seçilemez

Senaryo Adımı Tamamlandığında

• Kullanıcıya sabit giriş-çıkış aralığı atanır.
• Tarih-saat bilgisi formatlı şekilde ekranda görünür.
• (X) ikonuna basarak aralık sıfırlanabilir.
• Sistem sadece bu sabit aralığı kullanır.

Dinamik Kullanım Senaryosu – Rezervasyon Aralığı

Bir otel rezervasyon ekranında kullanıcı, giriş ve çıkış tarih-saatlerini kendisi seçer. Seçilen değerler veritabanına kaydedilir ve raporlama/iş akışı süreçlerinde kullanılır.

Veri Kaynağı Bağlama 

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

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

SELECT     CustomerName,    StartDate,    EndDate,    RoomType,    StatusFROM ReservationsWHERE StartDate >= GETDATE()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 > Reservations’ı seçin. 

Özelliklerin Kullanımı

• Start Value → Reservations.StartDate (Symbol Picker üzerinden)
• End Value → Reservations.EndDate (Symbol Picker üzerinden)
• Start Date Placeholder → “Giriş Tarihi ve Saati”
• End Date Placeholder → “Çıkış Tarihi ve Saati”
• Format → DD-MM-YYYY HH:mm
• Allow Clear → Kullanıcı seçimleri sıfırlayabilir
• Disable Before Date → Geçmiş tarihler devre dışı bırakılır

Senaryo Adımı Tamamlandığında

• Kullanıcı giriş ve çıkış tarihlerini (saat dahil) takvimden seçer.
• Geçmiş tarih-saatler seçilemez.
• Seçilen aralık formatlı şekilde ekranda görünür.
• Kullanıcı isterse (X) ikonuna basarak seçimlerini temizler.
• Sistem seçilen tarih-saat aralığını Reservations.StartDate ve Reservations.EndDate alanlarına kaydeder.
• İş akışında (ör. rezervasyon onayı, oda planlama) bu değerler otomatik kullanılır.

Kısıtlamalar

• Disable Before/After Time özellikleri yalnızca web uygulamalarda çalışır.
• Mobil cihazlarda seçim, cihazın native tarih-saat seçici arayüzüyle yapılır.

İpuçları ve Best Practices

• Rezervasyon veya planlama senaryolarında geçmiş tarihleri devre dışı bırakın.
• Kullanıcı deneyimi için placeholder metinlerini mutlaka ekleyin.
• Aralık seçiminde performans için gereksiz saniye adımlarını devre dışı bırakın.