"/>"/>
Yazılım Dilleri
Asp.Net 4.5 Kitabı
Skip Navigation Links

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.

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

Yorumlar (6)

  1. Avatar
    mehmet Alkan

    10.01.2014

    masterpage de nasıl çözdünüz acaba? çalımadı bende hata: JavaScript çalışma zamanı hatası: Nesne, ‘datepicker’ özelliğini veya yöntemini desteklemez mastepage olmadan çalıştı

  2. Avatar
    Betül Saltık

    02.02.2014

    Makale için çok teşekkürler ancak Yeni bir projede bu örneği çalıştırabildim , kendi projeme eklediğimde javascript kodları çalışmıyor malesef. Projemde masterpage var. Nasıl çözebilirim bu sorunu

  3. Avatar
    Serdar KA

    20.06.2014

    Teşekkürler..

  4. Avatar
    Selim ÜNÜVAR

    05.11.2014

    Teşekkürler.

  5. Avatar
    junior developer

    19.11.2014

    masterpage sayfasından türetilmiş sayfada ben de hata alıyorum. jquery 1.11.1 yuklu. tek başına-master pageden türemeyen sayfada çalışıyor. sorun yok orada fakat masterpageden türeyen web sayfasında (Nesne, "dttpTarih" özelliğini veya yöntemini desteklemez) hata alıyorum. fakat kodu class="dttpTarih" olarak yazdım. cunku birden fazla textbox var. bende sınıf ekleyip bu şekilde çağırdım. tek sayfada 3 textbox denedim, çalışıyor bu kodum. fakat master page türeyen sayfamda çalışmıyor. yardmcı olursanız memnun olurum.

  6. Avatar
    orhan

    16.12.2014

    masterpagede calıştıramadım nasıl yapabiliriz acaba?

Yorum Yap

Mail listesine katılmak için tıklayınız

Hakkımdaki son bilgilere anlık erişmek için mail listesine katılabilirsiniz.