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.



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

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"><br />
$(function() {<br />
        $( "#date_text" ).datepicker(); /*İd'si "#date_text" olan alanda widget'ı aktif ediyoruz.*/<br />
});<br />
</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.

[Toplam:0    Ortalama:0/5]

Jquery Datepicker Kullanımı” için 9 yorum

  • Avatar
    04 Mayıs 2013 tarihinde, saat 16:23
    Permalink

    Çok basit olarak kullanılabiliyor işimi fazlasıyla gördü teşekkürler hocam.

    Yanıtla
  • Avatar
    25 Ekim 2013 tarihinde, saat 17:46
    Permalink

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

    Yanıtla
  • Avatar
    26 Ekim 2013 tarihinde, saat 00:13
    Permalink

    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…

    Yanıtla
  • Avatar
    27 Ekim 2013 tarihinde, saat 20:29
    Permalink

    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?

    Yanıtla
  • Avatar
    28 Ekim 2013 tarihinde, saat 09:14
    Permalink

    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)

    Yanıtla
  • Avatar
    10 Ocak 2014 tarihinde, saat 15:50
    Permalink

    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

    masterpage olmadan çalıştı

    Yanıtla
  • Avatar
    20 Haziran 2014 tarihinde, saat 15:06
    Permalink

    Baslangıç tarihi bitiş tarihinden küçük olmalı küçük değilse hata vermeli.. Bunun için ne eklemem gerekir, bilgisi olan varsa paylaşırsa sevinirim..

    $(function() {
    $(“‪#‎datepicker‬”).datepicker();
    $(“‪#‎datepicker2‬”).datepicker();
    });
    Başlangıç Tarihi

    Bitiş Tarihi

    Yanıtla
  • Avatar
    27 Ekim 2014 tarihinde, saat 22:37
    Permalink

    Hocam Merhaba,

    .Net projemde söylediğiniz gibi kullandım ama hiç bir şekilde tarih girebiliceğim bir alan çıkmadı. Sorun neyden kaynaklı olabilir.

    Yanıtla
  • Avatar
    15 Nisan 2015 tarihinde, saat 16:10
    Permalink

    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"/>

    Yanıtla

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

%d blogcu bunu beğendi: