1. Date Range Elementine Genel Bakış

Date Range elementi, kullanıcıların başlangıç ve bitiş tarihinden oluşan bir zaman aralığını seçmesini sağlar. Form doğrulama gerektiren, zaman bazlı hesaplamaların yapıldığı ya da kayıtların belirli bir döneme göre filtrelendiği tüm uygulamalarda kritik bir rol oynar.
Kullanıcı, takvim seçici (datepicker) üzerinden iki tarih seçerek geçerli bir zaman aralığı oluşturur; element hem görsel olarak kolay kullanım sağlar hem de hatalı tarih girişlerini minimuma indirir.

Date Range elementi, web ve mobil uygulamalarda desteklenmektedir.

1.1. Sık Kullanım Senaryoları

Date Range elementi, tarih aralığı gerektiren birçok kullanım senaryosunda standart bir çözümdür:

• Raporlama ve filtreleme işlemleri: Belirli bir zaman aralığına göre liste veya tablo verilerini filtrelemek için kullanılır. Örnek: Siparişler, log kayıtları, ziyaretçi verileri.
• İzin, tatil veya mesai planlaması: Kullanıcı başlangıç ve bitiş tarihini seçerek izin formu oluşturabilir.
• Rezervasyon süreleri: Otel, araç kiralama, salon rezervasyonu gibi süreçlerde başlangıç–bitiş tarihleri zorunludur.
• Faturalandırma ve hesaplama dönemleri: Kullanıcı, ücret hesaplaması yapılacak dönemi seçer (örn. 01.01–31.01).
• Dönemsel analizler: KPI, satış, performans, maliyet gibi raporların belirli bir aralığa göre görüntülenmesi.

2. Temel Özellikler

• Manuel giriş veya takvim seçici ile kullanım. Kullanıcılar aralığı ister doğrudan yazabilir ister takvim üzerinden kolayca işaretleyebilir; bu da esneklik sağlar.
• Tarih formatını özelleştirebilme. DD/MM/YYYY, MM/DD/YYYY, YYYY/MM/DD gibi farklı format seçenekleri ile uygulamanın genel tarih yapısına uyum sağlanabilir.
• Temizleme (Clear) desteği. Allow Clear özelliği ile kullanıcı tek tıklamayla seçilen tarih aralığını sıfırlayabilir.
• Kullanıcı seçimlerini aksiyonlarla tetikleme. onChange tetikleyicisi sayesinde, tarih aralığı değiştiğinde filtreleme, grafik güncelleme, liste yenileme gibi işlemler otomatik olarak çalıştırılabilir.
• Responsive kullanım. Hem web hem de mobil arayüzlerde sorunsuz çalışır; mobil cihazlarda doğal tarih seçici ile entegre olur.

2.1. Date Range Elementi Özellikleri

Date Range elementinin tüm ayarları, sağ tarafta bulunan Properties paneli üzerinden yapılandırılır. Aşağıda her bir özellik detaylı biçimde açıklanmıştır:

• Start Value: Tarih aralığının başlangıç değerini statik bir tarih olarak belirleyebilir veya Symbol Picker kullanarak dinamik bir değer atayabilirsiniz.
• End Value: Tarih aralığının bitiş değerini statik olarak girebilir veya Symbol Picker kullanarak dinamik bir değer atayabilirsiniz.
• Start Date Placeholder: Kullanıcıya başlangıç tarihini girmesi gereken alan hakkında bilgi verir. Örneğin, "Başlangıç Tarihini Seçin".
• End Date Placeholder: Kullanıcıya bitiş tarihini girmesi gereken alan hakkında bilgi verir. Örneğin, "Bitiş Tarihini Seçin".
• Allow Clear: Kullanıcıların seçtikleri tarihleri tek bir tıklama ile silebilmesine olanak tanır. Sağ köşede beliren Delete (X) ikonu ile girişler sıfırlanabilir.
• Format: Tarih aralığının kullanıcı arayüzünde hangi tarih biçiminde görüntüleneceğini belirler. Açılır listeden seçilen formata göre hem başlangıç hem de bitiş tarihi aynı biçimde gösterilir. Desteklenen formatlar şunlardır:
  
  • DD/MM/YYYY (ör. 31/12/2026)
  • MM/DD/YYYY (ör. 12/31/2026)
  • YYYY/MM/DD (ör. 2026/12/31)
  • YYYY/DD/MM (ör. 2026/31/12)
  • D M Y (ör. 31 12 2026)
  • DD.MM.YYYY (ör. 31.12.2026)

2.2. Elemente Eklenebilen Aksiyonlar

Date Range elementi, kullanıcı tarih aralığını değiştirdiğinde aksiyon tetiklemenize olanak tanır. Bu elementte yalnızca bir adet tetikleyici bulunur:

OnChange

Kullanıcı başlangıç veya bitiş tarihini değiştirdiğinde tetiklenen aksiyondur. Date Range elementinin tüm etkileşimsel kullanım senaryoları bu tetikleyici üzerinden yönetilir.

Kullanım Senaryoları:

• Seçilen tarih aralığına göre tablo, liste veya grafikleri filtrelemek
• Raporlama ekranlarında tarih aralığı değiştiğinde veriyi yeniden yüklemek
• Dinamik hesaplamaları tetiklemek (ör. fiyat, kapasite, uygunluk kontrolü)
• API çağrılarını tarih aralığına bağlı olarak yenilemek
• Form doğrulama süreçlerini çalıştırmak
• Tarih aralığına göre bir panelin görünürlüğünü güncellemek

Aksiyonun Çalışma Mantığı:

• OnChange tetiklendiğinde başlangıç ve bitiş tarihleri aksiyon parametrelerine otomatik olarak iletilir.
• Bu değerler Symbol Picker üzerinden alınarak SQL veya REST çağrılarında kullanılabilir.
• Tarih aralığı temizlendiğinde de OnChange tetiklenir; bu sayede filtrelerin sıfırlanması sağlanabilir.
  

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

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

Senaryo: Belirli Tarihler Arası Harcamaları Gösterme

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

Senaryoda:

• Kullanıcı, başlangıç ve bitiş tarihi 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 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.
• “
  • Ö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ı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.

• Ö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: 

1. Bu senaryoda iki aksiyon kullanılacaktır.
2. 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' AS date), N'Kira',   8200 UNION ALL
SELECT NEWID(), CAST('2025-03-12' AS date), N'Market', 2800 UNION ALL

-- 2025 HAZİRAN
SELECT NEWID(), CAST('2025-06-10' AS date), N'Ulaşım', 1250 UNION ALL
SELECT NEWID(), CAST('2025-06-18' AS date), N'Fatura', 2100 UNION ALL

-- 2025 EYLÜL
SELECT NEWID(), CAST('2025-09-07' AS date), N'Kira',   9000 UNION ALL
SELECT NEWID(), CAST('2025-09-22' AS date), 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 > DateRange elementini sürükleyip bırakın.
• Date Range elementinde DateRange > Properties > StartDatePlaceholder > “Başlangıç Tarihi Giriniz” alanına yazısını ekleyin.
  

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

• Tercihlerin temizlenebilmesi için DateTimeRange > Properties > AllowClear > Açık olarak ayarlayın.
  

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

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

• Aksiyonda başlangıç tarih parametresine GetExpensesByDateRange > Components > DateRange > 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 Range (başlangıç–bitiş tarihi) 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ıç ve bitiş tarihleri 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 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 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)

• Tarihleri her zaman geçerli bir formatta tutun. Uygulamada kullanılacak tüm tarih değerlerinin datetime veya en azından YYYY-MM-DD formatında olmasına dikkat edin. Yanlış formatlar filtreleme ve karşılaştırma işlemlerinde hata oluşturabilir.
• Başlangıç ve bitiş tarihlerini her zaman doğrulayın. Start Value > End Value olması durumunda Date Range boş döner veya aksiyonlarınız hatalı sonuçlar üretir. Bu nedenle SQL veya API sorgularında ek kontrol önerilir.
• Temizleme (Clear) özelliğini aktif tutun. Kullanıcı tarih aralığını kolayca sıfırlayabilmeli. Bu sayede filtreleme senaryoları daha akıcı olur.

6. Kısıtlamalar

• Veri kaynağına bağlı bir yapı değildir. Date Range yalnızca tarih seçimi sağlar; veri yükleme, filtreleme veya hesaplama işlemleri için mutlaka OnChange ile aksiyon bağlanması gerekir.
• Format uyumsuzluklarında SQL veya API hataları oluşabilir. MM/DD/YYYY gibi bazı formatlar, sunucu tarafında doğru parse edilmeyebilir. Bu nedenle backend ile uyumlu format seçilmelidir.
• Tarih aralıkları boş bırakılırsa OnChange tetiklenmeyebilir. Özellikle mobilde kullanıcı yalnızca başlangıç veya yalnızca bitiş tarihi seçtiğinde aksiyon çalışmayabilir. Bu durumda ek doğrulama yapılmalıdır.