1. Date Time Range Elementine Genel Bakış

Kuika’nın Date Time Range elementi, kullanıcıların hem tarih hem de saat içeren bir zaman aralığı seçmesini sağlayan gelişmiş bir giriş elementidir. Kullanıcı, başlangıç ve bitiş tarih–saat değerlerini manuel olarak girebilir veya açılır tarih–saat seçici aracılığıyla kolayca belirleyebilir.

Bu element; rezervasyon sistemleri, randevu planlamaları, vardiya takibi, etkinlik yönetimi, süre hesaplamaları ve zaman aralığı doğrulaması gerektiren tüm iş akışları için kullanılabilir.

Date Time Range elementi, başlangıç ve bitiş zamanları arasında mantıksal bir doğruluk sağlar. Örneğin, bitiş zamanı başlangıç zamanından önce seçilemez; böylece hatalı veri girişlerini önler ve kullanıcı deneyimini iyileştirir.

Date Time Range elementi, web ve mobil uygulamalarda desteklenmektedir.

1.1. Sık Kullanım Senaryoları

• Rezervasyon işlemleri: Otel, araç, oda veya kaynak rezervasyonu için başlangıç–bitiş zaman aralığı seçimi.
• Randevu planlaması: Klinik randevuları, servis talepleri, eğitim veya toplantı saat aralıkları.
• Vardiya ve çalışma saatleri yönetimi: Personelin çalışma başlangıç ve bitiş saatlerinin belirlenmesi.
• Etkinlik süresi tanımlama: Etkinlik, seminer, webinar veya organizasyonun başlangıç–bitiş zamanlarını seçme.
• Zaman bazlı raporlama filtreleri: Kullanıcıların belirli bir tarih–saat aralığına göre liste, tablo veya grafik filtrelemesi.
• Kullanıcı aktivitelerini izleme: Log kayıtlarını, işlemleri veya hareketleri zaman aralığına göre analiz etme.
• Süre hesaplama senaryoları: Başlangıç–bitiş değerlerinden çalışma süresi veya toplam geçen süre hesaplama.
• Teslimat ve hizmet zamanlama: Kargo veya hizmet sağlayıcı için uygun teslim zaman aralığı seçimi.

2. Temel Özellikler

• Manuel giriş veya tarih–saat seçici ile kullanım. Kullanıcılar aralığı ister doğrudan yazabilir ister görsel tarih–saat seçici üzerinden kolayca seçebilir; bu da daha esnek bir kullanım sağlar.
• Tarih ve saat formatını özelleştirebilme. YYYY/MM/DD HH:mm, DD/MM/YYYY HH:mm gibi farklı format seçenekleri ile uygulamanın genel zaman yapısına uyum sağlanabilir.
• Temizleme (Clear) desteği. Allow Clear özelliği ile kullanıcı, seçtiği başlangıç–bitiş değerlerini tek tıklamayla temizleyebilir.

2.1.Date Time Range Elementi Özellikleri

Date Time Range elementinin özelliklerini, sağ kenardaki Properties panelinden yapılandırabilirsiniz.

• Start Value: Tarih ve saat aralığının başlangıç değerini belirler. Statik bir tarih-saat değeri girebilir veya Symbol Picker aracılığıyla dinamik bir değer seçebilirsiniz.
• End Value: Tarih ve saat aralığının bitiş değerini belirler. Statik bir değer girebilir veya Symbol Picker kullanarak dinamik bir değer seçebilirsiniz.
• Start Date Placeholder: Kullanıcıya başlangıç tarihini girmesi gereken alan hakkında bilgi verir. Örneğin, "Başlangıç Tarihini Seçin" gibi bir metin ekleyebilirsiniz.
• End Date Placeholder: Kullanıcıya bitiş tarihini girmesi gereken alan hakkında bilgi verir. Örneğin, "Bitiş Tarihini Seçin" gibi bir metin ekleyebilirsiniz.
• Allow Clear: Kullanıcıların tarih ve saat aralığını tek bir tıklama ile temizlemesine olanak tanır. Sağ köşede beliren Delete (X) ikonu ile girişler sıfırlanabilir.
• Format: Tarih ve saat aralığının görüntülenme biçimini belirler. Format, kullanıcının tarih ve saat değerlerini girmesi veya görüntülemesi için farklı seçenekler sunar. Örneğin, yalnızca tarih kısmını (gün, ay, yıl) gösterebilir veya tam tarih ve saati (saat, dakika, saniye) içerecek şekilde ayarlanabilir. Eğer saniye kısmı istenmiyorsa, bu özellik sayesinde sadece tarih ve saat kısımları gösterilebilir.

2.2. Elemente Eklenebilen Aksiyonlar

Date Time Range elementi, kullanıcı tarih–saat aralığını değiştirdiğinde aksiyon tetiklemek için tek bir olay (event) destekler:

onChange

Kullanıcı başlangıç veya bitiş tarih–saat alanında bir değişiklik yaptığında tetiklenir. Uygulamada zaman aralığına bağlı veri güncellemeleri veya işlemler bu event üzerinden yönetilir.

Olası kullanım senaryoları:

• Seçilen tarih–saat aralığına göre tablo veya liste filtreleme
• Form doğrulama işlemlerini tetikleme
• Raporda gösterilecek tarih aralığını dinamik olarak değiştirme
• API üzerinden yeni veri sorgulama
• Kullanıcının seçtiği zaman aralığını başka elementlere aktarma
• Hesaplama işlemleri (ör. toplam süre = End – Start)

3. Date Time Range Elementi Nasıl Kullanılır? 

Bu bölümde Date Time Range elementinin uçtan uca kullanımını örnek senaryolar üzerinden ele alacağız.

Senaryo: Belirli Tarih ve Saatler Arası Harcamaları Gösterme

Bir kişisel finans veya gider takip uygulamasında kullanıcılar, belirli bir tarih ve saat aralığında yaptıkları harcamaları tek ekranda görüntülemek ister. Date Range elementi, bu senaryoda hangi tarih ve saat aralığına ait verilerin listeleneceğini seçmek için kullanılır.

Senaryoda:

• Kullanıcı, başlangıç-bitiş tarih ve saati belirleyerek ilgili döneme ait harcamaları filtreleyebilir.
• Seçilen tarih aralığı için harcama türü, tutar ve harcama tarihi bilgileri tablo üzerinde listelenir.
• Date Range elementi sayesinde tarih seçimi esnek, anlaşılır ve kontrollü bir şekilde gerçekleştirilir.
• Tek sayfa üzerinde hem tarih ve saat aralığı seçimi hem de listeleme işlemleri pratik bir kullanım deneyimi sunar.

Adım 1 - Veri Kaynağı Oluşturma

DataSources modülünde tablo oluşturma: 

• Datasources modülüne gidin. 
• Ardından Tables sekmesine gidin.
• “ExpenseRecords” adında yeni tablo oluşturun.
• Kurulması gereken tablo yapısı aşağıdaki gibidir:

• Önemli Alan adları:
  
  • ExpenseDate: Harcamanın gerçekleştiği tarih bilgisini tutar. Filtreleme ve dönem bazlı raporlamalarda temel alınan alandır.
  • HarcamaTuru: Harcamanın kategorisini ifade eder (örn. Kira, Market, Ulaşım, Fatura). Grafikler, özet tablolar ve kategori bazlı analizlerde kullanılır.
  • Tutar: Harcamanın parasal değerini belirtir. Toplam, ortalama ve karşılaştırmalı finansal analizlerin hesaplandığı ana alandır.

Adım 2 - Gerekli Aksiyonları Tanımlama

Arayüzde verileri göstermek ve kaydetmek için: 

• Bu senaryoda iki aksiyon kullanılacaktır.
• Datasources modülü içerisinde Actions > New SQL Action sekmesinden yeni aksiyon ekleyin.

• Örnek Verileri Ekleyen Aksiyon (InsertExpenseRecords): Uygulamayı örnek verilerle test etmek için aşağıdaki SQL aksiyonunu ekleyin ve TEST butonuna basın.

INSERT INTO ExpenseRecords (Id, ExpenseDate, HarcamaTuru, Tutar)

-- 2025 MART
SELECT NEWID(), CAST('2025-03-05 09:15:30' AS datetime), N'Kira',   8200 UNION ALL
SELECT NEWID(), CAST('2025-03-12 18:45:10' AS datetime), N'Market', 2800 UNION ALL

-- 2025 HAZİRAN
SELECT NEWID(), CAST('2025-06-10 08:30:00' AS datetime), N'Ulaşım', 1250 UNION ALL
SELECT NEWID(), CAST('2025-06-18 21:10:45' AS datetime), N'Fatura', 2100 UNION ALL

-- 2025 EYLÜL
SELECT NEWID(), CAST('2025-09-07 07:55:20' AS datetime), N'Kira',   9000 UNION ALL
SELECT NEWID(), CAST('2025-09-22 23:20:55' AS datetime), N'Eğlence',1800;

Uygularken ExpenseRecords kısmını silip tekrar ExpenseRecords yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.

• Verileri Filtreleyip Sağlayan Aksiyon (GetExpensesByDateRange):
  

SELECT *
FROM ExpenseRecords
WHERE ExpenseDate >= @StartDate
  AND ExpenseDate <= @EndDate
ORDER BY ExpenseDate;

Uygularken ExpenseRecords kısmını silip tekrar ExpenseRecords yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.

Adım 3 - Element ve Aksiyon Ekleme

• Sayfaya Elements > Date and Time Input > DateTimeRange elementini sürükleyip bırakın.
• Date Time Range elementinde DateTimeRange > Properties > StartDatePlaceholder > “Başlangıç Tarihi ve Saatini Giriniz” alanına yazısını ekleyin.
  

• Date Time Range elementinde DateTimeRange > Properties > EndDatePlaceholder > “Bitiş Tarihi ve Saatini Giriniz” alanına yazısını ekleyin.
  

• Tarihlerin seçiminden sonra listenin getirilmesi için Date Time Range elementi seçiliyken aksiyon ekleyin. DateTimeRange > Add Action > onChange > Custom > Managed DB > GetExpensesByDateRange aksiyonunu ekleyin.
  
  

• Aksiyonda başlangıç tarih parametresine GetExpensesByDateRange > Components > DateTimeRange > startValue tanımlamasını yapın.
  

• Aksiyonda başlangıç tarih parametresine GetExpensesByDateRange > Components > DateTimeRange > endValue tanımlamasını yapın.
  

• Aksiyonu doğrudan hazır tablo olarak kullanmak için sol yan paneldeki Action Tree alanına ilerleyin ve içerisindeki GetExpensesByDateRange aksiyonunun yakındaki mavi ikondan sayfaya sürükleyin.
  

• Açılan ekranda Table ve Outputs alan seçimlerini yapın ve Oluştur’a basın.
  

• Son durumda ekran içeriğinin aşağıdaki gibi olması beklenir.
  

Preview:

Uygulama ilk açıldığında, üst bölümde yer alan Date Time Range (başlangıç–bitiş tarih ve saati) alanı boş olarak görüntülenir ve kullanıcıdan harcamaları filtrelemek istediği tarih aralığını seçmesi beklenir. Bu durumda tablo, veri bekleme durumunu ifade edecek şekilde boş veya örnek alan yapısıyla gösterilir.

Kullanıcı bir tarih aralığı belirlediğinde, seçilen başlangıç-bitiş tarih ve saatleri arasına ait harcama türü, tutar ve harcama tarihi bilgileri tablo üzerinde otomatik olarak listelenir. Böylece kullanıcı, belirli bir dönem içerisindeki tüm giderlerini tek ekranda düzenli ve anlaşılır bir şekilde inceleyebilir.

Date Time Range elementi üzerine gelindiğinde, sağ kenarında yer alan çarpı ikonuna tıklanarak seçilen tarih aralığı kolayca temizlenebilir.

4. Ortak Özellikler (Properties)

Date Time Range elementi üzerinde yer alan bazı alanlar tüm UI elementlerinde ortak olarak kullanılır. Bu nedenle, aşağıdaki özelliklerin detaylı açıklamaları ilgili genel kılavuz sayfalarında yer almaktadır:

• Authorization (Yetkilendirme) Ayarları
• Visibility (Görünürlük)
• Editability (Düzenlenebilirlik)
• Style Panel (Stil Ayarları)

5. Kullanım Tavsiyeleri (Best Practices)

• Zaman aralığı değiştiğinde yapılacak işlemleri optimize edin. onChange tetikleyicisini yalnızca gerekli durumlarda kullanarak gereksiz aksiyon çalıştırmalarını engelleyin.
• Kullanıcı deneyimini artırmak için Start ve End placeholder metinlerini açık ve yönlendirici şekilde yazın.
• Tarih–saat formatını tüm uygulamada tutarlı olacak şekilde belirleyin. Karışık formatlar kullanıcı hatalarına ve veri uyumsuzluğuna yol açabilir.
• Raporlama veya liste filtreleme gibi yoğun veri işlemlerinde, zaman aralığını küçülterek sorgu performansını artırabilirsiniz.

6. Kısıtlamalar

• Date Time Range elementi, yalnızca başlangıç ve bitiş şeklindeki çiftli seçimi destekler; tekli tarih–saat seçimi için uygun değildir.
• Tarih–saat doğrulaması, API veya veri tabanı sonuçları yanlış formatta gönderildiğinde çalışmayabilir. Özellikle datetime formatının tam ve uyumlu olması gerekir.