Javascript Jquery

JQuery UI DatePicker Kullanımı

Bu örneğimizde JQuery’nin UI eklentisini kullanarak DatePicker yapacağız.
İlk olarak JQuery’nin sayfasından jquery ve ui dosyalarını indirerek çalışma dosyamıza bağlıyoruz.
Ağaç yapısı şu şekilde olacaktır;


HTML: DatePicker için bir ‘input’ nesnesi oluşturuyoruz. Kullanıcı bu nesneye tıkladığında datepicker açılacak.

JQuery: Kurucu metodun içerisine kodlarımızı yazıyoruz. input nesnesini seçerek ‘datepicker’ özelliğini atıyoruz.

Oluşturduğumuz datePicker varsayılan olarak ingilizce ayarlı. İlk olarak ayları Türkçe’ye çevirelim. Bunun için ‘monthNames’ ve ‘monthNamesMin’ özelliklerini kullanıyoruz. Min olarak yazdığımız özellik kısa yazımlarını ifade ediyor. Gün isimleri için ‘dayNames’ ve ‘dayNamesMin’ kullanıyoruz. Gün isimleri ekranda kısa haliyle görünüyor bu yüzden min özelliğini kullanıyoruz. Ama fare ile üzerine geldiğimizde ingilizce isimleri görünecektir bu yüzden ‘dayNames’ özelliğini kullanıyoruz. ‘FirstDay’ özelliği ile de takvimin hangi günden başlayacağınız belirliyoruz. Değeri 0(sıfır)’dan başlıyor yani varsayılan başlama günü pazardır. Bizim takvimimiz pazartesiden başladığı için bu değeri 1 olarak değiştiriyoruz.

Butonların üzerine gelindiğinde varsayılan olarak ingilizce yazılar çıkıyor. Bunları değiştirmek için ‘prevText’ ve ‘nextText’ özelliklerini kullanıyoruz.

Son olarak da tarih formatını değiştiriyoruz. Varsayılan olarak ay/gün/yıl olarak gösteriliyor. Bunu gün/ay/yıl olarak değiştireceğiz. Bunu da ‘dateFormat’ özelliğini kullanıyoruz.

Daha çok Dtepicker özelliğine şu linkten ulaşabilirsiniz;
http://api.jqueryui.com/datepicker/

Yorum yap