Jquery UI.Widgets - Date Picker
Jquery kütüphanesi web programcılarına yüzlerce yararlı ve hızlı çözüm getirdi. Bunun yanında, Jquery UI - User Interface (kullanıcı arayüzü) ek kütüphanesi de özellikle görsel anlamda bir çok soruna çözüm buldu. Karmaşık ve detaylı projelerin yanında basit işleri hızla halletmenizi sağlayan onlarca ek özelliği ve aleti mevcut. Bunlardan biri de Date Picker; yani tarih seçme kutusu.
Bu araç basitçe sizin başka herhangi bir ek kaynak olmadan Jquery UI ile sitedeki öğelere tarih yazımı kolaylaştırıyor. Bunu eklemenin yolu da çok basit.
<script>$(function() {$( "#kutu" ).datepicker();});</script>
Bu kod parçası, jquery ui kütüphanesi de daha önce çağırılmış ise, kutu öğesine tarih seçme kutusu ekleyecektir. Daha geniş bir örnek görmek gerekirse.
<!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript></script><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js" type="text/javascript></script></head><body><div class="demo"><p>Tarih: <input type="text" id="kutu"></p></div><script>$(function() {$( "#kutu" ).datepicker();});</script></body></html>
Burada gerçekleşen olaylar:
- Yukarıdaki "script" etiketleri ile ile jquery ve jquery ui kütüphaneleri çağırılır. (Dışarıdan değil de yerel de çağırılabilinir.)
- Alt kısımdaki ikinci "script" etiketi ile site veya sayfa içi scriptler çağırılır.
- "div" kısmındaki "kutu" idli input öğesi sadece textbox tır; boş bir yazı kutusudur.
- Alt kısımdaki "script" etiketli kısımda fonksiyon içerisinde, kutu idli öğeye datepicker bağlanır.
Jquery UI ile ilgili daha fazla bilgi almak öğelerin arayüz temalarını görüntülemek için bu adresi kullanabilirsiniz.