Web sitelerimizde kullanıcıdan tarih girdisi almak isteyebiliriz.Bunun için jquery ui nin güzel bir takvim özelliği var.Özelleştirmelere açık bir plugin.İstersek jquery nin sitesinden kendimiz tasarım yapıp o dosyayı çağırarakta tasarım değiştirebiliriz.
Burdan pluginin nasıl kullanılacağını inceleyin.
indir : http://ustaderslik.com/dosya/Jquery-Uİ%20(Takvim).rar
<html>
<head>
<title>cArleone</title>
<script type="text/javascript" src="jquery-1.9.0.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.0.custom.js"></script>
<link rel="stylesheet" href="demos.css" />
<link rel="stylesheet" href="jquery-ui-1.10.0.custom.min.css" />
<script type="text/javascript">
$(function() {
$( "#tarih" ).datepicker({
dateFormat: "yy-mm-dd",//tarih formatı yy=yıl mm=ay dd=gün
appendText: "(yıl-ay-gün)",//inputun sonuna bu yazıyı yazar.
autoSize: true,//inputu otomatik boyutlandırır
changeMonth: true,//ayı elle seçmeyi aktif eder
changeYear: true,//yılı elee seçime izin verir
dayNames:[ "pazar", "pazartesi", "salı", "çarşamba", "perşembe", "cuma", "cumartesi" ],//günlerin adı
dayNamesMin: [ "pa", "pzt", "sa", "çar", "per", "cum", "cmt" ],//kısaltmalar
defaultDate: +5,//takvim açılınca seçili olanı bu günden 10 gün sonra olsun dedik
/*isRTL: true//takvimi ters çevirir garip bi özellik :D*/
maxDate: "+2y+1m +2w",//ileri göre bilme zamanını 2 yıl 1 ay 2 hafta yaptık
minDate: "-1y-1m -2w",//geriyi göre bilme alanını 1 yıl 1 ay 2 hafta yaptık.bunu istediğiniz gibi ayarlaya bilirsiniz
monthNamesShort: [ "Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık" ],//ay seçim alanın düzenledik
nextText: "ileri",//ileri butonun türkçeleştirdik
prevText: "geri",//buda geri butonu için
showAnim: "bounce",//takvim açılım animasyonu alta tüm animasyon isimleri yazdım
/*fold-blind-bounce-clip-drop-explode-fade-highlight-puff-pulsate-scale-shake-slide-size-transfer*/
showOn: "both",//inputun yanına ... butonu koyuyor
});
});
</script>
<style type="text/css">
</style>
</head>
<body>
<input type="text" id="tarih" />
</body>
UstaDerslik
