JQuery UI DatePicker Kullanımı

Konuyu Okuyanlar (0 kayıtlı üye )

sdkbyrm

olwα.ɴeт
Üyelik Tarihi
23 Aralık 2020
Mesajlar
813
Beğeniler
1
Puanı
3
Ticaret: 0 / 0 / 0
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.


1
2
3

<span>Doğum Tarihiniz: <input type="text" id="dPicker"></span>


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


1
2
3
4
5

$(function(){
$("#dPicker").datepicker();
});


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.


1
2
3
4
5
6
7
8
9

$(function(){
$("#dPicker").datepicker({
monthNames:["Ocak","Şubat","Mart","Nisan","Mayıs","Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık" ],
dayNames:["Pazar","Pazartesi","Salı","Çarşamba","Perşembe","Cuma","Cumartesi"],
dayNamesMin:["Paz","Pts","Sal","Çar","Per","Cum","Cts"]
});
});


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.


1
2
3
4
5
6
7
8
9
10
11
12

$(function(){
$("#dPicker").datepicker({
monthNames:["Ocak","Şubat","Mart","Nisan","Mayıs","Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık" ],
dayNames:["Pazar","Pazartesi","Salı","Çarşamba","Perşembe","Cuma","Cumartesi"],
dayNamesMin:["Paz","Pts","Sal","Çar","Per","Cum","Cts"],
prevText:"Geri",
nextText:"İleri",
firstDay:1
});
});


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.


1
2
3
4
5
6
7
8
9
10
11
12
13

$(function(){
$("#dPicker").datepicker({
monthNames:["Ocak","Şubat","Mart","Nisan","Mayıs","Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık" ],
dayNames:["Pazar","Pazartesi","Salı","Çarşamba","Perşembe","Cuma","Cumartesi"],
dayNamesMin:["Paz","Pts","Sal","Çar","Per","Cum","Cts"],
prevText:"Geri",
nextText:"İleri",
firstDay:1,
dateFormat:"dd.mm.yy"
});
});




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