Asp.Net ile hazırladığımız web projelerinde tarih seçimi için Calendar kontrolü bulunmaktadır fakat Calendar, çok tercih edilen bir kontrol değildir. Bunun yerine yazılım geliştiriciler ve kullanıcılar çoğunlukla TextBox benzeri bir kontrolde tarih seçimini yapmak isterler.
Örneğin aşağıdaki kontrolde, TextBox’ın yanında bulunan takvim butonuna tıklandığında aşağıda takvim açılmaktadır. Bu yapı varsayılan olarak Asp.Net içerisinde bulunmamaktadır. Bu makalemizde jQuery ile benzer bir yapıyı nasıl yapacağımızı öğreneceğiz.
Asp.Net web form üzerine bir adet TextBox kontrolü ekleyelim ve ismini dttpTarih olarak tanımlayalım.
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="dttpTarih" runat="server"></asp:TextBox>
</div>
</form>
</body>
Formun body kısmında yapacağımız tüm işlemler bu kadar. Bundan sonra bu kontrole jQuery Datepicker eklentisini bağlayacağız.
Kullanacağımız javascript ve css dosyalarını sayfamıza ekleyelim.
- http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css
- http://code.jquery.com/jquery-1.9.1.js
- http://code.jquery.com/ui/1.10.3/jquery-ui.js
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Query ve jQuery UI javascript dosyaları ile jQuery UI css’ini sayfaya ekledikten sonra dttpTarih kontrolüne jQuery DatePicker eklentisini bağlayalım.
$(function () {
$("#dttpTarih").datepicker({
showOn: "button",
buttonImage: "takvim.png",
buttonImageOnly: true,
dateFormat: "dd.mm.yy",
monthNames: ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık"],
dayNamesMin: ["Pts", "Sl", "Çrş", "Prş", "Cm", "Cts", "Pzr"]
});
});
showOn: DatePicker eklentisini tetikleyecek (takvimi açacak) olan yöntemi tanımlıyoruz. Takvimi, dttpTarih kontrolünün yanına eklenecek bir button’a tıklayarak açacağız.
buttonImage: Ekleyeceğimiz butonda görünecek resim dosyasının yolunu belirtiyoruz.
buttonImageOnly: Butonda sadece resmin yer alacağını tanımlıyoruz (yazı yazmayacak).
dateFormat: DatePicker’da seçilen tarihin TextBox’a hangi formatta aktarılacağını belirtiyoruz (gün.ay.yıl).
monthNames: DatePicker eklentisinde ay isimleri varsayılan olarak İngilizce gelmektedir. Ay isimlerini Türkçe’ye çeviriyoruz.
dayNames: DatePicker eklentisinde gün isimleri varsayılan olarak İngilizce gelmektedir. Gün isimlerini Türkçe’ye çeviriyoruz.
Formun son hali aşağıdaki gibi olacaktır.
<head runat="server">
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function () {
$("#dttpTarih").datepicker({
showOn: "button",
buttonImage: "takvim.png",
buttonImageOnly: true,
dateFormat: "dd.mm.yy",
monthNames: ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık"],
dayNamesMin: ["Pts", "Sl", "Çrş", "Prş", "Cm", "Cts", "Pzr"]
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="dttpTarih" runat="server"></asp:TextBox>
</div>
</form>
</body>
Sayfayı çalıştırdığımızda TextBox ve yanında takvim butonunun yer aldığını göreceksiniz. Butona tıkladığınızda hemen altında DatePicker açılacaktır. Tarihi seçtiğinizde ise TextBox kontrolüne seçili tarihi atayıp kapanacaktır.
Yepyeni makalelerde görüşmek dileğiyle :)
Veysel Uğur KIZMAZ
Bilgisayar Mühendisi
veysel@ugurkizmaz.com
www.ugurkizmaz.com