Hoşgeldiniz
Okuma Moduna Geç
05 Mart 2018 - 19:50
jQuery ile Kullanışlı Tarih Seçici: Air Datepicker

Bir proje geliştirirken en çok ihtiyaç duyulan alanlardan biri de tarih seçiciler. Bir blog scripti yazarken bile yazının yayınlanma tarihinde kullanılabilir olan bu seçicilere hemen her projemde ihtiyaç duyuyorum ve her seferinde tekrar tekrar araştırma yapmak ve yeni bir şeyler var mı diye göz atmaktan kendimi alıkoyamıyorum. Fakat ne yazık ki bu alanda geliştirilen çok fazla alternatif bulunmuyor veya bulunsa dahi küçük tabelaları sebebi ile internetin uçsuz bucaksız sokaklarında onları aramak epey zaman kaybettiriyor.

Üstüne basarak vurguluyorum ya, birçok projemde ihtiyaç duyduğum bu tarih seçicilerin içinden genelde dönüp dolaşıp geldiğim nokta hep aynı oluyor: Air DatePicker.

t1m0n tarafından geliştirilen Air DatePicker, bu makaleyi yazdığım tarihi ele alırsak ne yazık ki 2016 Eylül ayından bu yana güncellenmiyor. Fakat bu, sizlere anlatmak için yazmış olduğum makalemin konusundaki Air DatePicker'ın kötü bir tarih seçici olduğu anlamına gelmiyor (ee hemen her projemde kullanıyorum dedim sonuçta).. Android 4.4+ ve iOS8+ sonrasında da problemsiz çalıştığı söylenen tarih seçicimiz, klasik bir görünüme sahip ve oldukça hızlı çalışıyor.

Kurulum

Buradaki linke tıklayarak ulaştığınız github adresinde izlemeniz gereken yollar;

  • dist > js > datepicker.min.js
  • dist > css > datepicker.min.css

Bu adreslerden dosyalarımızı indirdikten sonra projemize dahil ediyoruz. Bu dosyaları projemize ekledikten sonra tarih seçicimizin Türkçe olma aşamasına geçelim.

Tarih Seçiciyi Türkçeleştirme

Air DatePicker için kaynak dil dosyalarında Türkçe ne yazık ki mevcut değil. Fakat Türkçe desteklemesini sağlamak çok zor bir işlem değil. Dil dosyalarını düzenleyerek oluşturduğum datepicker.tr.js dosyasını aşağıdaki butona tıklayarak indirebilirsiniz.

datepicker.tr.js dosyasını indir

Dosya içeriği de şu şekildedir;

;(function ($) { $.fn.datepicker.language['tr'] = {
    days: ['Pazar', 'Pazartesi', 'Salı', 'Çarşamba', 'Perşembe', 'Cuma', 'Cumartesi'],
    daysShort: ['Paz', 'Pzt', 'Sal', 'Çar', 'Per', 'Cum', 'Cmt'],
    daysMin: ['Pa', 'Pz', 'Sa', 'Ça', 'Pe', 'Cu', 'Cm'],
    months: ['Ocak','Şubat','Mart','Nisan','Mayıs','Haziran', 'Temmuz','Ağustos','Eylül','Ekim','Kasım','Aralık'],
    monthsShort: ['Oca', 'Şub', 'Mar', 'Nis', 'May', 'Haz', 'Tem', 'Ağu', 'Eyl', 'Eki', 'Kas', 'Ara'],
    today: 'Bugün',
    clear: 'Temizle',
    dateFormat: 'mm/dd/yyyy',
    timeFormat: 'hh:ii aa',
    firstDay: 0
}; })(jQuery);

Dosyamızı da projemize dahil ediyoruz. Ardından dosyamızı tanımlayabilmesi için datepicker.min.js dosyamızı açıyoruz ve içerisinde CTRL+F tuş kombinasyonu ile language:"ru" ibaresini aratıyoruz. Anlaşıldığı üzere ru ifadesi yerine tr yazarak dosyamızı kaydediyoruz. Artık tarih seçicimiz Türkçe oluyor.

Tarih Seçiciyi Çalıştırmak

Tarih seçiciyi aktif bir input olarak kullanmak oldukça kolay. JQuery'nin tetiklenmesi için belirlenen bir class ismi var (datepicker-here) ve bu class ismini input'a eklediğimizde otomatik olarak tarih seçicimiz çalışacaktır.

<input type='text' class="datepicker-here" data-position="right top" />

Yapıda dikkat çeken diğer bir bölüm olan data-position ise tarayıcıda datepicker'a ait olan çentiğin input'un neresinden başlayacağını belirtiyoruz;

  • right top
  • right bottom
  • left top
  • left bottom

Değerlere ilişkin önizlemeleri şöyle bir görselde özetleyebiliriz;

Zaman Seçiciyi Aktif Etmek

Air DatePicker, diğer tarih seçicilerde olduğu gibi bir zaman seçicisine de sahiptir. Bu seçiciyi aktif etmek için inputumuza yeni bir etiket eklememiz yeterlidir: data-timepicker="true"

<input type='text' class="datepicker-here" data-timepicker="true" data-position="left bottom" />

Ayrıca zaman seçildiğinde input içerisine yapılacak çıktının formatını da şöyle ayarlayabiliriz: data-time-format="hh:ii aa"

<input type='text' class="datepicker-here" data-timepicker="true" data-time-format="hh:ii aa" data-position="left bottom" />

Veritabanımıza kaydedeceğimiz verilerde data-time-format alanımıza hh:ii yazarak saniyeyi 00 kabul edip veriyi kayıt ettirebiliriz.

Başlangıç ve Bitiş Zamanlarını Belirlemek

minHours, maxHours, minMinutes ve maxMinutes ile başlangıç ve bitiş zamanlarımızı belirleyebiliriz:

$('.datepicker-here').datepicker({
    minHours: 8,
    maxHours: 18,
    minMinutes: 10,
    maxMinutes: 50
})

Şeklinde belirlediğimiz yapımızda saat 08:10 am - 06:50 pm aralığında olacaktır.

Bugün ve Temizle İbarelerini Aktif Etmek

Varsayılan olarak false değerleri ile gelen özelliklerimizi aktif etmek için script kodumuza şu eklemeleri yapabiliriz:

$('.datepicker-here').datepicker({
    todayButton: new Date(),
    clearButton: true
})

Burada eğer ki her datepicker için bu seçeneklerimizi aktif etmek istemiyorsak aktif olmasını istediğimiz datepickerımıza yeni bir class belirleyerek yalnızca o class için bu seçeneklerin gözükmesini sağlayabiliriz:

<script>
	$(function () {
		$('.ozel-datepicker').datepicker({
		    todayButton: new Date(),
		    clearButton: true
		})
	})
</script>
<input type='text' class="datepicker-here ozel-datepicker" data-position="left bottom" />
<input type='text' class="datepicker-here" data-position="left bottom" />

Bu durumda yalnızca birinci inputumuzda bugün ve temizle seçenekleri görüntülenecektir.

Seçimden Sonra Otomatik Kapanması

Varsayılan olarak false gelen bu özelliğimizi aktif ederek, seçim yapıldıktan sonra datepicker'ın otomatik olarak kapanmasını istiyorsak script kodumuza şöyle bir ekleme yapabiliriz:

$('.datepicker-here').datepicker({
    autoClose: true
})

Başlıkları Değiştirmek

Varsayılan olarak gelen başlıkları düzenlemek için navTitles'ı kullanabiliriz:

$('.datepicker-here').datepicker({
    navTitles: {
		days: '<i>Ay:</i>&nbsp;MM <i>| Yıl:</i>&nbsp;yyyy',
		months: '<i>Yıl:</i>&nbsp;yyyy',
		years: 'yyyy1<i> ile</i>&nbsp;yyyy2<i> arasında</i>'
	}
})

Not: Kodda yer alan "&nbsp;" ibaresi boşlukların doğru şekilde görüntülenebilmesi içindir.

Ve sonucunda görünüm şöyle olacaktır:

Bu bilgiler dışında tüm özelliklerini incelemek istiyorsanız buraya tıklayarak dökümantasyon sayfasına ulaşabilirsiniz.

Sponsorlu Bağlantı
İlk Yorumu Sen Bırak!
Bu konu hakkında henüz kimse görüş bildirmedi. İlk görüşü sen aktarmak ister misin?
Adınız ve Soyadınız
Mail Adresiniz
Mail adresinizi yalnızca yönetici görüntüleyebilir.
Web Siteniz
Yorumunuz
Yorumu Gönder