Jquery Datepicker Kullanımı

Jquery Datepicker

JqueryUI ve Datepicker

      Merhaba arkadaşlar sizlere web projelerinde tarihsel text alanlarına veri girişi yapmayı kolaylaştıran jqueryUI kütüphanesinin  widget’i  datepicker’ın kullanımını anlatacağım. Eğer widget’in görünümü konusunda bir sıkıntınız bulunmuyorsa projenize eklemeniz gayet basit olacaktır. Aşağıda göründüğü gibi Title aldındaki css ve javascript kütüphanelerini projemize dahil ettikten sonra istediğimi textbox kutucuğuna widgetı eklememiz mümkün olacaktır.

<!doctype html>
<head>
<title>DatePicker Kullanımı</title>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
</head>

Widget için yukarıda css bağlantısını tanımladıktan sonra jquery kutuphanelerini ekliyoruz.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {     
        $( "#date_text" ).datepicker(); /*İd'si "#date_text" olan alanda widget'ı aktif ediyoruz.*/   
});
</script>

/*Tarih:*/ <input id="date_text" type="text" />

//Tarih girilecek text kutusu..

Datepicker‘ı farklı animasyonlar kullanarak açılmasını sağlayabilirsiniz. Aşağıdaki kod bloğunda datepicker’ın farklı animasyon parametreleri kullanılmaktadır.


$( "#date_text1" ).datepicker( "option", "showAnim", "show" );//Standart olarak köşeden açılır.
$( "#date_text2" ).datepicker( "option", "showAnim", "slideDown" );//Yukarıdan aşağı perde şeklinde açılır.
$( "#date_text3" ).datepicker( "option", "showAnim", "fadeIn" );//Yavaşça görünerek açılır..
$( "#date_text4" ).datepicker( "option", "showAnim", "blind" );//Slide 'a benzer fakat daha seri açılır.
$( "#date_text5" ).datepicker( "option", "showAnim", "bounce" );//Açıldıktan sonra zıplarr..
$( "#date_text6" ).datepicker( "option", "showAnim", "clip" );//Ortadan aşağı yukarı açılır..
$( "#date_text7" ).datepicker( "option", "showAnim", "drop" );//Soldan yavaşça kesilerek açılır..
$( "#date_text8" ).datepicker( "option", "showAnim", "fold" );//Önce sola sonra aşağı slide şeklinde açılır
$( "#date_text9" ).datepicker( "option", "showAnim", "slide" );//Soldan perde şeklinde açılır.

PaylaşShare on Facebook7Tweet about this on TwitterShare on Google+0Pin on Pinterest0Share on Tumblr0Share on LinkedIn0Email this to someone

Yazar Hakkında Yazarın Bütün Yazıları Yazarın Web Sitesi

aliduman

6 YorumYorum Yazmak İçin

  • merhaba bu uygulamayı master page li sayfada yapamıyorum yardımcı olabilir misiniz ?

  • Merhaba @İnan,

    Makalemizde ki örnek masterpageli sayfada çalışabilir. Çalışmaması gibi bir durum söz konusu değildir. Eğer hata aldığın yeri paylaşabilir, yada takıldığın yer olursa tekrardan buraya yorum düşebilirsin. Ekip olarak en kısa sürede cevaplamaya özen göstereceğiz.

    Saygılarımla…

  • teşekkürler sıkıntımın nerede olduğunu çözdüm ama bir sorum daha olacak
    bu inputu runat=”server” dediğim zaman haliyle tarih javascripti çalışmıyoru peki ben .cs dosyasından nasıl erişeceğim?

  • Tekrardan merhaba @İnan,

    Evet örneğin inputa runat=”server” dedin ve datapickerda seçtiğin tarihi içeride yani .cs dosyasında şu şekilde alabilirsin; 1.si inputa id vereceksin eğer vermedi isen, örneğin ben id kısmına date_text dedim ve bunu daha sonra .cs kısmında şu şekilde kullanalım; Convert.ToDateTime(date_text.Value)

  • Türkçe için gereken örnek olaraktan ek kodlar;

    $(function() {
    $.datepicker.setDefaults($.datepicker.regional[‘tr’]);
    $( ‘#takvim’ ).datepicker({ dateFormat: ‘dd.mm.yy’ });
    });

    <input name="takvim" id="takvim"/>

Bir Cevap Yazın

Your email address will not be published. Required fields are marked *


*