jQuery Datepicker

Posted on 29 Temmuz 2009

Form girdilerinde tarih alanlarının elle girmek yerine daha kolay bir yöntem bir takvim modülünde tarih seçilebilir. O amaçla hazır scriptler kolayca bulunabilmektedir.

En basit haliyle JQuery plugleri ile ne kadar kolay yapıldığını göstermek için bir örneği paylaşıyorum.

datepicker

Tarih alanına tıklandığında açılan pencereden istenilen tarihi seçtiğinizde popup menu kapanır ve seçilen tarih verisi girdi alanına geri döndürülür.

JQuery sitesinden alıp denediğim örnek kodu konunun anlaşılabilmesi için ekliyorum.

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Datepicker</title>
<style type="text/css">
@import "jquery.datepick.css";
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.datepick.js"></script>
<script type="text/javascript">
$(function() {
    //$.datepick.setDefaults({useThemeRoller: true});
    $('#popupDatepicker').datepick();
    $('#inlineDatepicker').datepick({onSelect: showDate});
});

function showDate(date) {
    alert('The date chosen is ' + date);
}
</script>
</meta></head>
<body>
<h2>jQuery Datepicker</h2>
<p>Tarih seçici <input type="text" id="popupDatepicker"/></p>
</body>
</html>

Kodlar, plugin ve JQuery ajax paketini buradan indirebilirsiniz.

http://rapidshare.com/files/261422781/jquery-date-picker.rar

Makalenin yazarı:

zbahadir - Yazarın makale sayısı toplam 74 yazan: zbahadir.


Yazar ile iletişim

Yorum ekle

You must be logged in to post a comment.

Kategoriler

Arşivler

Takvim

Temmuz 2009
Pts Sal Çar Per Cum Cts Paz
« Nis   Eki »
 12345
6789101112
13141516171819
20212223242526
2728293031