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/