Jquery Datepicker Kullanımı
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.
Click to rate this post!
[Total: 0 Average: 0]
Çok basit olarak kullanılabiliyor işimi fazlasıyla gördü teşekkürler hocam.
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)
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ı
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
Hocam Merhaba,
.Net projemde söylediğiniz gibi kullandım ama hiç bir şekilde tarih girebiliceğim bir alan çıkmadı. Sorun neyden kaynaklı olabilir.
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"/>