Jquery Datepicker Kullanımı
Javascript

Jquery Datepicker Kullanımı

Merhaba arkadaÅŸlar. Bu makalemizde yukarıdaki görselde görüldüÄŸü üzere Datepicker ile tarih seçebilmek adına bir takvim yapacağız. Bu takvim, form öÄŸemize tıkladığımızda hemen altında görüntülenecektir. Öncelikle sayfamıza import edeceÄŸimiz jquery.ui.datepicker-tr.js dosyamızı yazalım. İnternette de bulabileceÄŸiniz bir kod bloÄŸu fakat sizi fazla uÄŸraÅŸtırmamak adına paylaşıyorum. AÅŸağıdaki linkten ilgili kodlarımızı alıp js dosyamızı oluÅŸturalım.

https://code.google.com/p/struts2-jquery/source/browse/trunk/struts2-jquery-plugin/src/main/resources/template/i18n/jquery.ui.datepicker-tr.min.js?r=1823

Js dökümanımızı oluÅŸturduÄŸumuza göre ÅŸimdi asıl sayfamıza geçelim. Öncelikle js ve css dosyalarımızı sayfamıza dahil ediyoruz. Sonrasında gerekli javascript kodlarımızı yazalım. Bu kodlar <head> etiketleri arasına yazılacaktır.

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.ui.datepicker-tr.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tarih").datepicker($.datepicker.regional['tr']);
});
</script>
İşlem tamamdır. Son olarak bir form elemanı oluşturuyoruz.
<div><input type="text" id="tarih" style="padding:5px; width:200px; border:solid; border-color:#cccccc; border-width:5px; -webkit-border-radius:  3px; -moz-border-radius:  3px; border-radius:  3px;" /></div>
Takvimin ÅŸeklini deÄŸiÅŸtirmek isteyenler aÅŸağıdaki linke gözatabilirler. Yararlı olması dileÄŸiyle, görüÅŸmek üzere...
http://jqueryui.com/datepicker/


author

Aykut ErdoÄŸan

datepicker, jquery, javascript

  • Bu Yazılara da Gözat:

    1 Yorum

    author

    Cevapla