Date Time elementi, kullanıcıların aynı arayüz üzerinden hem tarih hem de saat bilgisini seçmesine olanak tanıyan gelişmiş bir giriş elementidir. Tarih seçici (date picker) ile saat seçicinin (time picker) birleşimi olarak çalışır ve zaman duyarlı işlemlerde doğru ve tutarlı veri girişi yapılmasını sağlar.
Bu element, kullanıcıların tarih ve saat bilgisini manuel olarak girmesine veya açılır tarih–saat arayüzünden seçmesine imkân tanır. Ayrıca iki Date Time elementi birlikte kullanıldığında, Disable Before Time özelliği sayesinde bitiş tarih-saat alanında yalnızca geçerli seçenekler aktif olur. Böylece başlangıç ve bitiş zamanları arasında tutarlılık sağlanır, hatalı seçimler önlenir.
Randevu sistemleri, teslimat zamanlamaları, etkinlik başlangıç–bitiş kayıtları ve zaman damgası gerektiren tüm işlemlerde Date Time elementi kritik bir rol oynar. Hem web hem mobil cihazlarda kullanıcı dostu, sezgisel bir seçim deneyimi sunar.
Date Time elementi, web ve mobil uygulamalarda desteklenmektedir.
1.1. Sık Kullanım Senaryoları
Tarih ve saat seçiminin birlikte yapılması gereken işlemler. Örneğin: randevu oluşturma, toplantı planlama, servis talebi zamanlama.
Zaman bazlı rezervasyon işlemleri. Otel giriş–çıkış saatleri, ulaşım rezervasyonları, teslimat zaman aralığı seçimi.
Başlangıç ve bitiş zamanlarının doğrulanması gereken senaryolar. Örneğin: etkinlik başlangıç/bitiş saatleri, mesai başlangıç–bitiş kayıtları.
Saat kısıtı gerektiren akışlar. Disable Before Time kullanılarak başlangıç saatinden önceki opsiyonların kapatılması gereken senaryolar (ör. dönüş saati başlangıç saatinden küçük olamaz).
Teslimat ve operasyon planlama süreçleri. Kurye teslimat saatleri, bakım–onarım hizmetleri, saha ekiplerinin zaman planlaması.
Kullanıcıdan tam zamanlı bir veri alınması gereken formlar. Örneğin: randevu kaydı, toplantı oluşturma, raporlanacak tarih-saat bilgisi talep eden tempolar.
2. Temel Özellikler
Tarih ve saat seçimlerini tek bir elementte birleştirme. Kullanıcı hem tarihi hem de saati aynı element üzerinden seçebilir. Bu, zaman duyarlılığı olan işlemler için ideal bir kullanım sağlar.
Manuel giriş veya etkileşimli seçim desteği. Kullanıcı tarih ve saati elle yazabilir ya da açılır tarih–saat seçici arayüzünden seçebilir. Böylece hem hızlı hem de kontrollü giriş yapılır.
Disable Before Time ile zaman tutarlılığı sağlama. İki Date Time elementi birlikte kullanıldığında, bitiş tarih–saat alanında yalnızca geçerli saat seçenekleri aktif edilir. Örneğin:
Başlangıç: 10 Haziran 14:00
Bitiş alanı artık 14:00’den önceki saatleri seçtirmez.
Bu özellik rezervasyon, randevu, lojistik gibi süreçlerde hatalı veri girişlerini önler.
Dinamik değer desteği. Symbol Picker aracılığıyla Date Time elementine dinamik başlangıç veya varsayılan değer atanabilir. Örn: “Şu anki tarih-saat”, “kullanıcının seçtiği değer”, “hesaplanan saat” gibi.
2.1. Element Ayarları (Properties)
Date Time 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:
Value: Statik bir tarih-saat değeri belirleyebilir veya Symbol Picker kullanarak dinamik değerler atayabilirsiniz.
Placeholder: Kullanıcıya tarih ve saat bilgisini girmesi için rehberlik eden bir yer tutucu metin ekleyebilirsiniz. Örneğin, "Tarih ve Saat Seçin". Placeholder, Date Time elementinin değeri boş olduğunda görüntülenir.
Allow Clear: Kullanıcının seçtiği tarih ve saati tek tıklama ile temizleyebilmesine olanak tanır. Sağ köşede beliren Delete (X) ikonu ile girişler sıfırlanabilir.
Format: Tarih ve saat verilerinin nasıl görüntüleneceğini belirler. Properties panelindeki açılır menüden aşağıdaki formatları seçebilirsiniz:
yyyy MM dd hh mm:
Yıl - Ay - Gün - Saat - Dakika
Örnek: 2025.04.24 / 15:30
dd MM yyyy hh mm:
Gün - Ay - Yıl - Saat - Dakika
Örnek: 24.04.2025/ 15:30
dd MM yyyy hh mm ss:
Gün - Ay - Yıl - Saat - Dakika - Saniye
Örnek: 24.04.2025 / 15:30:45
hh mm:
Saat ve Dakika
Örnek: 15/30
mm ss:
Dakika ve Saniye
Örnek: 30:45
hh mm ss:
Saat - Dakika - Saniye
Örnek: 15:30:45
yyyy-MM-DD HH:mm:ss:
ISO formatında tam tarih ve saat
Örnek: 2025-04-24 15:30:45
DD-MM-YYYY HH:mm:ss:
Avrupa tipi tarih ve saat formatı
Örnek: 24-04-2025 15:30:45
HH:mm:
Saat ve Dakika (24 saatlik format)
Örnek: 15:30
Hh:mm:ss:
Saat - Dakika - Saniye (12 saatlik format, AM/PM)
Örnek: 03:30:45 PM
Mm:ss:
Dakika ve Saniye
Örnek: 15:45
Disable Before Date: Belirli bir tarihten önceki tarihlerin seçilmesini engeller. Statik bir tarih belirleyebilir veya dinamik değerler kullanabilirsiniz. Bu özellik, gelecekteki tarihler için sınırlamalar belirlemek amacıyla kullanılır.
Disable Before Time: Belirli bir saatten önceki zaman aralıklarının seçilmesini engeller.
Disable After Time: Belirli bir saatten sonraki zaman aralıklarının seçilmesini engeller.
Use 12 Hours: Saatin 12 saatlik (AM/PM) veya 24 saatlik formatta görüntülenmesini belirler.
Hour Step: Kullanıcının saat seçiminde hangi aralıklarla ilerleyebileceğini belirler. Örneğin, her saat yerine her yarım saatte bir seçim yapılabilir.
Minute Step: Kullanıcının dakika seçiminde hangi aralıklarla ilerleyebileceğini belirler. Örneğin, araç teslimi gibi işlemler için her 30 dakikada bir seçim yapılabilir.
Second Step: Kullanıcının saniye seçiminde hangi aralıklarla ilerleyebileceğini belirler.
Return Display Value(sadece web): Kullanıcının seçtiği tarih-saat değerinin, formatlı şekilde (ekranda göründüğü haliyle) mi yoksa ham değer olarak mı döndürüleceğini belirler. Mobilde kullanılamaz.
2.2. Elemente Eklenebilen Aksiyonlar
Date Time elementi, kullanıcı bir tarih veya saat seçtiğinde tetiklenen onChange aksiyonunu destekler. Bu aksiyon, elemente yeni bir değer girildiğinde otomatik olarak çalışır ve diğer işlemlerin tetiklenmesini sağlar.
Date Time elementini seçtikten sonra sağ paneldeki ADD ACTION → onChange seçeneği ile aksiyon ekleyebilirsiniz.
Aşağıda Date Time’ın aksiyon davranışı detaylı şekilde açıklanmıştır:
onChange
Kullanıcı tarih veya saat alanında bir değişiklik yaptığında çalışır. Bu tetikleyici, zaman duyarlı işlemleri senkronize etmek veya diğer elementleri güncellemek için kullanılır.
Kullanım Senaryoları
Seçilen tarihe göre liste veya tabloyu filtrelemek → Örn: “Bu tarih-saatten sonra oluşturulan kayıtları göster.”
Başlangıç tarih-saat seçildiğinde bitiş elementini kısıtlamak → Disable Before Time ile birlikte etkin şekilde çalışır.
Form doğrulamalarını tetiklemek → “Saat geçerli değilse uyarı göster.”
Fiyat hesaplama, süre hesaplama gibi işlemleri otomatik yapmak → Örn: kiralama süresine göre tutar hesaplama.
API veya veritabanı sorgularını yeniden çalıştırmak → Örn: “Bu saate göre uygun randevuları getir.”
Diğer elementlerde (Label, Text, SelectBox vb.) dinamik değer güncellemek.
onChange’in Teknik Davranışı
Kullanıcı yeni bir tarih-saat seçtiği anda tetiklenir.
Eski ve yeni değerler otomatik olarak aksiyona aktarılır (Symbol Picker ile erişilebilir).
Arayüzde senkron değişiklikler yapılabilir (gizleme, gösterme, doğrulama).
3. Date Time Elementi Nasıl Kullanılır?
Bu bölümde Date Time elementinin uçtan uca kullanımını örnek senaryolar üzerinden ele alacağız.
Senaryo: Hatırlatıcı Oluşturma
Bir hatırlatma veya günlük not uygulamasında kullanıcılar, belirli bir tarihe ait kısa bir açıklama kaydetmek ister. Date Time elementi, bu senaryoda notun hangi güne ait olduğunu seçmek için kullanılır.
Senaryoda:
Kullanıcı, tarih bazlı kayıtlarını tek ekranda kolayca takip eder.
Date Time elementi sayesinde zaman saat bilgisi net ve hatasız şekilde alınır.
Basit form + liste yapısıyla, tek sayfa üzerinde giriş ve görüntüleme işlemleri tamamlanır.
Adım 1 - Veri Kaynağı Oluşturma
DataSources modülünde tablo oluşturma:
Datasources modülüne gidin.
Ardından Tables sekmesine gidin.
“” adında yeni tablo oluşturun.
Kurulması gereken tablo yapısı aşağıdaki gibidir:
Önemli Alan adları:
NoteText: Kullanıcının girdiği not veya kısa açıklama bilgisini tutar. Liste veya tablo yapısında, kaydın içeriğini kullanıcıya okunabilir şekilde gösterir.
NoteDate: Nota ait tarih bilgisini ifade eder. Date elementi üzerinden seçilen bu alan, kaydın hangi güne ait olduğunu belirtir ve tarih bazlı takip yapılmasını sağlar.
Önemli Alan adları:
NoteText: Kullanıcının girdiği not veya kısa açıklama bilgisini tutar. Liste veya tablo yapısında, kaydın içeriğini kullanıcıya okunabilir şekilde gösterir.
NoteDate: Nota ait tarih bilgisini ifade eder. Date elementi üzerinden seçilen bu alan, kaydın hangi güne ait olduğunu belirtir ve tarih bazlı takip yapılmasını sağlar.
Önemli Alan adları:
NoteText: Kullanıcının girdiği not veya kısa açıklama bilgisini tutar. Liste veya tablo yapısında, kaydın içeriğini kullanıcıya okunabilir şekilde gösterir.
NoteDate: Nota ait tarih bilgisini ifade eder. Date elementi üzerinden seçilen bu alan, kaydın hangi güne ait olduğunu belirtir ve tarih bazlı takip yapılmasını sağlar.
Adım 2 - Gerekli Aksiyonları Tanımlama
Arayüzde verileri göstermek ve kaydetmek için:
Bu senaryoda üç aksiyon kullanılacaktır. Kayıt işlemleri için Kuika tarafından sunulan Save Record hazır sistem aksiyonu kullanılır.
Veri listeleme işlemi, ön tanımlı SQL sorguları ile oluşturulan özel bir aksiyon üzerinden gerçekleştirilir.
Datasources modülü içerisinde Actions > New SQL Action sekmesinden yeni aksiyon ekleyin.
Örnek Verileri Listeleyen Aksiyon (GetNotes): Select aksiyonu, SQL Action bölümünde sol panelde yer alan NoteDateRecords tablosu altında hazır olarak sunulur. Add Select Query seçeneğine tıklandığında sorgu otomatik oluşturulur. Oluşturulan aksiyonu GetNotes olarak adlandırın ve kaydedin.
Table Column içerisine Elements > Date and Time Input > DateTime elementini sürükleyip bırakın.
Adım 5 - Element Ayarlarının Yapılandırılması
Sayfaya eklenen initial aksiyonun elementlere bağlantısı ve kayıt aksiyonun eklenmesi:
Button elementine tıklayın. Button > Add Action > onClick > ManagedDb > Save Record aksiyonuna tıklayın.
Save Record NoteDate parametresini Components > Date1 > value olarak tanımlayın.
NoteText parametresini Components > TextInput1 > value olarak ayarlayın.
Id alanına Default > New Guid tanımlamasını yapın.
Kayıttan sonra listenin güncellenmesi için Button > onClick > Custom > Managed DB > GetNotes aksiyonunu ekleyin.
Table elementi içerisindeki Label elementine tıklayın. Label > Properties > Value > Field to display> NoteText olarak tanımlayın.
Date elementine tıklayın. DateTime > Properties > Value > Field to display > NoteDate olarak tanımlayın.
Tablodaki hatırlatma zamanının sadece okunabilir olması için DateTime > Properties > Editability > Disabled olarak ayarlayın.
Preview:
Uygulama test edildiğinde, kullanıcı Text Input alanına hatırlatma açıklamasını ve Date Time alanına hatırlatma tarihini ve saati girerek kaydı oluşturur.
Kaydedilen hatırlatma, tek sayfa üzerinde yer alan tabloda listelenir. Daha önce eklenmiş hatırlatmalar da aynı tablo içerisinde görüntülenerek geçmiş kayıtların kolayca takip edilmesi sağlanır.
4. Ortak Özellikler (Properties)
Date Time 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:
Tarih ve saat değerlerini her zaman datetime formatında saklayın. Yanlış veri tipleri (string, number vb.) API veya Managed DB süreçlerinde hatalara yol açabilir.
Disable Before Time özelliğini mutlaka doğru yapılandırın. Özellikle başlangıç–bitiş senaryolarında dönüş saatlerinin geçmişe düşmesini engeller. Örnek: Randevu bitiş saati, başlangıç saatinden önce olamaz.
Zorunlu alan kontrolü yapın. Tarih-saat seçilmesi gereken süreçlerde boş değerler için kullanıcıyı uyarın.
Zaman duyarlı hesaplamalarda onChange aksiyonunu kullanın. Örn: “Bu iki tarih-saat arasındaki süreyi hesapla.”
Saat formatını uygulama genelinde tutarlı şekilde belirleyin. Örn: 24 saat formatı (HH:mm) veya 12 saat formatı (AM/PM).
6. Kısıtlamalar
Date Time elementi, mobil ve web uygulamalarda farklı görüntülenebilir. Mobilde yerleşik tarih-saat seçici kullanıldığı için bazı görsel farklılıklar ortaya çıkabilir.
Yanlış formatta gönderilen tarih-saat değerleri aksiyonlarda hata oluşturabilir. (Örn. "2025-10-21 5pm" yerine "2025-10-21 17:00:00" kullanılmalıdır.)
Date Time elementi yalnızca tarih ve saat seçimi içindir, aralık (range) yapısı içermez. Aralık seçimi gerekiyorsa Date Range elementi kullanılmalıdır.
