Skip to main content

DateTimePicker

Kullanıcının takvimden tarih seçmesini sağlayan nesnedir. İstenirse saat de seçtirebilir. Başlangıç tarihi, teslim tarihi, doğum tarihi gibi alanlar için kullanılır.

Değer tipi: DateTime?

Ne zaman kullanılır?

Tarih ya da tarih + saat girişi gereken her yerde kullanın: talep tarihi, termin, randevu saati. Kullanıcı serbest metin yazmaz, takvimden seçer; böylece hatalı biçimde tarih girilmesinin önüne geçilir. Saat de istiyorsanız ShowTime özelliğini açın.

Tasarımcı özellikleri

Bir DateTimePicker seçildiğinde Özellik Görüntüleyici sekmelere ayrılır.

General

ÖzellikAçıklama
NameNesnenin koddaki adı (ör. DateTimePicker1). Koddan bu adla erişirsiniz.
Field NameVeritabanındaki alanın adı.

Label

Nesnenin yanındaki etiketi yönetir.

ÖzellikAçıklama
Caption / TextEtiketin yazısı (çok dilli olabilir).
PositionEtiketin yeri: solda (Left) veya üstte (Top).
Width / HeightEtiketin boyutu.
FontYazı tipi, kalın / italik / altı çizili.
Show ColonEtiketin sonuna iki nokta (:) ekler.
Horizontal Align / Vertical AlignEtiketin hizası.
VisibleEtiketi gösterir veya gizler.

Behavior

ÖzellikAçıklama
AllowClearSeçilen tarihi temizlemek için kutuda bir (×) düğmesi gösterir.
DisableBeforeBu tarihten öncesini seçilemez yapar (alt sınır).
DisableAfterBu tarihten sonrasını seçilemez yapar (üst sınır).
FormatTarihin gösterim biçimi (ör. dd.MM.yyyy veya dd.MM.yyyy HH:mm).
ReadOnlyAlanı salt okunur yapar.
RequiredAlanı zorunlu yapar; boşsa form kaydedilmez.
SetTodayAsDefaultForm açıldığında bugünün tarihini varsayılan olarak yazar.
ShowTimeTarihin yanında saat seçimini de açar.
ShowTodayTakvimde "Bugün" düğmesini gösterir.
Tab IndexTab tuşuyla geçiş sırasını belirler.

Appearance

ÖzellikAçıklama
Visible / Client VisibleNesnenin görünürlüğü.
Enabled / Client EnabledNesnenin aktif olup olmadığı.
PlaceholderAlan boşken görünen soluk ipucu yazısı.
Text AlignYazının hizası.
TitleFareyle üzerine gelince çıkan ipucu (tooltip).
Size TypeGenişlik davranışı (sabit / esnek).

Olaylar

Bir nesne açılırken olaylar belirli bir sırayla tetiklenir; kullanıcı tarih seçince de ayrı olaylar çalışır. Doğru kodu doğru olaya yazmak için bu sırayı bilmek işinizi kolaylaştırır.

Açılış sırası: OnInitOnLoadOnDataLoadOnPreRenderOnRender

Kullanıcı tarih seçince: OnValueChangingOnValueChanged

Olaylar iki tarafta çalışabilir: sunucu olayları C# kodunda, istemci olayları tarayıcıdaki TypeScript kodunda. DateTimePicker'ın iki tarafta sunduğu olaylar farklıdır.

Sunucu olayları (Server)

OlayNe zaman çalışır
OnInitForm açılırken nesne oluşturulduğunda, en başta.
OnLoadOnInit'in hemen ardından, nesne yüklenince.
OnRenderNesne ekrana çizilirken.
OnTextChangingGörünen tarih metni değişmeden hemen önce.
OnTextChangedGörünen tarih metni değiştikten hemen sonra.
OnValueChangingTarih değeri değişmeden hemen önce (iptal edilebilir).
OnValueChangedKullanıcı tarih seçip değer kesinleştiğinde. En sık kullanılan olaydır.
OnValidatingForm kaydedilmeden önce değerin geçerliliği kontrol edilirken.

İstemci olayları (Client)

Sunucudaki olaylara ek olarak tarayıcı tarafında şunlar da vardır:

OlayNe zaman çalışır
OnDataLoadNesnenin verisi yüklendiğinde.
OnPreRenderNesne ekrana çizilmeden hemen önce.
OnClick / OnDoubleClickNesneye tıklanınca / çift tıklanınca.
OnPropertyChanging / OnPropertyChangedBir özellik kodla değiştirilmeden önce / sonra.
Olay parametreleri

OnValueChanging olayının parametresi (args TS, e C#) şunları taşır:

  • newValue / NewValue — seçilmek istenen yeni tarih
  • oldValue / OldValue — önceki tarih
  • cancel / Canceltrue yapılırsa değişiklik iptal edilir (yalnızca Changing olaylarında)

Changed olaylarında cancel yoktur (değişiklik artık gerçekleşmiştir).

Kod örnekleri

Bir DateTimePicker'a üç yerden erişebilirsiniz. Sunucu örnekleri turuncu, istemci örnekleri kırmızı çerçevelidir.

Form kodu (C#, sunucu)

Form kodunda nesneye doğrudan adıyla erişirsiniz. Değer DateTime? tipindedir (boş olabilir):

// Oku
DateTime? tarih = DateTimePicker1.Value;

// Yaz
DateTimePicker1.Value = DateTime.Now;

// Boş mu kontrol et
if (DateTimePicker1.Value == null)
{
ShowMessage("Uyarı", "Lütfen bir tarih seçin.",
Bimser.CSP.FormControls.RuleManager.AlertType.Validation);
}

Akış (Flow) kodu (C#, sunucu)

Akış kodunda nesneye Document1.Controls üzerinden erişirsiniz:

// Oku
DateTime? tarih = Document1.Controls["DateTimePicker1"].Value;

// Yaz
Document1.Controls["DateTimePicker1"].Value = DateTime.Now;

İstemci kodu (TypeScript, tarayıcı)

İstemci tarafında nesnelere this. ile erişilir ve özellik adları küçük harfle yazılır (value):

// Oku
const tarih = this.DateTimePicker1.value;

// Yaz
this.DateTimePicker1.value = new Date();
Boş tarihe dikkat

DateTime? tipi boş (null) olabilir. Kullanıcı hiç tarih seçmediyse değer null gelir. Tarihle işlem yapmadan önce mutlaka boş olup olmadığını kontrol edin; aksi halde kod hata verir. Zorunlu tutmak istiyorsanız Required özelliğini açmanız en pratik yoldur.

Örnek: geçmiş tarihi engelleme (OnValueChanging)

OnValueChanging değer değişmeden hemen önce çalışır; istemediğiniz bir tarihi burada iptal edebilirsiniz. Aşağıdaki örnekte bugünden önceki bir tarihin seçilmesi engellenir.

İstemci (TypeScript):

async DateTimePicker1_OnValueChanging(args: Controls.EventArgs.IPropertyChangingEventArgs<Date>) {
if (args.newValue && args.newValue < new Date()) {
args.cancel = true; // Tarih değişimini iptal eder
this.showMessage("Uyarı", "Geçmiş bir tarih seçemezsiniz.", "Validation");
}
}

Sunucu (C#):

void DateTimePicker1_OnValueChanging(object sender, PropertyChangingEventArgs<DateTime?> e)
{
if (e.NewValue != null && e.NewValue < DateTime.Now)
{
e.Cancel = true;
ShowMessage("Uyarı", "Geçmiş bir tarih seçemezsiniz.",
Bimser.CSP.FormControls.RuleManager.AlertType.Validation);
}
}

İpuçları

  • Sadece tarih yetiyorsa ShowTime özelliğini kapalı bırakın; saat de gerekiyorsa açın.
  • Geçmiş ya da gelecek tarihleri sınırlamak için kod yazmak yerine DisableBefore ve DisableAfter özelliklerini kullanın; tasarımcıdan ayarlamak daha pratiktir.
  • Form açılır açılmaz bugünün tarihinin dolu gelmesini istiyorsanız SetTodayAsDefault özelliğini açın.
  • Zorunlu tarih alanlarında kod ile boş kontrolü yapmak yerine Required özelliğini kullanın.
Tüm tasarımcı özellikleri (tam liste)

General: Name, Field Name

Label: Caption, Text, Position, Left, Width, Height, Font (Bold / Italic / Underline), Ellipsis, Visible, Show Colon, Horizontal Align, Vertical Align, Mark Char, Mark Position

Behavior: AllowClear, DisableBefore, DisableAfter, Format, ReadOnly, Required, SetTodayAsDefault, ShowTime, ShowToday, TabIndex

Appearance: Visible, Client Visible, Enabled, Client Enabled, Placeholder, Text Align, Title, Text, Size Type, Value

Olaylar (Client): OnInit, OnLoad, OnPreRender, OnRender, OnPropertyChanging, OnPropertyChanged, OnClick, OnDoubleClick, OnDataLoad, OnValueChanging, OnValueChanged, OnTextChanging, OnTextChanged, OnValidating

Olaylar (Server): OnInit, OnLoad, OnRender, OnValueChanging, OnValueChanged, OnTextChanging, OnTextChanged, OnValidating