Asp.Net jQuery DatePicker Eklentisi ile DateTimePicker Oluşturma

Asp.Net sayfasına jQuery DatePicker eklentisi ve TextBox ile DateTimePicker ekleme işleminin nasıl yapıldığını öğrenelim.

23.06.2013

Yazar: Veysel Uğur KIZMAZ (Google+)

Kategori: ASP.NET

8872

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

Yazar Hakkında

Veysel Uğur KIZMAZ

www.ugurkizmaz.com

YazılımDilleri.Net projesinin lideri olan Veysel Uğur Kızmaz, Gazi Üniversitesi Bilgisayar Mühendisliği bölümü mezunudur. Bir çok projede çalışmış, yazılım alanında birçok eğitimler vermiştir. Şu an özel bir yazılım danışmanlık firmasında Sharepoint proje danışmanlığı ve proje yöneticiliği yapmaktadır. Veysel Uğur Kızmaz, dahil olduğu projelerin çeşitliliği sebebiyle farklı alanlarda uzmanlaşmıştır: .Net, Sharepoint, Java, Php, Javascript, SQL Server, Oracle, MySQL.

2 Yorum

Arzu Yıldız

12.08.2018

Merhaba, ellerinize sağlık çok yardımcı oldu :)

turgay -

02.02.2015

Merhaba, makale için teşekkürler. Sanırım ufak bir hata var, Türkçe yaptığınızda haftanın pazartesi gününden başlaması gerekiyor ama görünürde pazartesi ilk gün olmasına rağmen aslında takvimde hala pazar günü ilk gün, kısacası takvimide ünler 1 gün kayıyor bu hali ile tarihi yanlış gösteriyor. Bunu "weekStart: 1" ekleyerek düzeltmeye çalıştım ama değişen birsey olmadı, farklı bir çözüm yöntemi var mı acaba?

Yazar Hakkında

Sosyal Medya

2 Yorum

Yorum Yaz / Soru Sor

Son Yorumlar

En Güncel Sorular

En Son Cevap Verilen Sorular

Twitter

En Çok Okunanlar

Sponsorlar