jQuery UI Datepicker

首頁 > JQUERY > jQuery UI Datepicker

jQuery UI Datepicker

2009年5月15日 DoReMiCat 發表評論閱讀評論

前篇介紹過使用Google CDN Host 的 Javascript Library – jQuery
利用這個特性~我們可以不必在自己的Server上放任何jQuery相關檔案~~直接可以使用!!

下面以 jQuery UI Datepicker 為範例
並弄了適合當做"生日"日期選擇的 Datepicker 方便各位使用~~~
主要的code如下,或直接範例下載


<STYLE type=text/css>@import url(http://wxy.googlecode.com/svn/trunk/blogger/jquery/ui.datepicker.css);</STYLE>
<SCRIPT src="http://www.google.com/jsapi" type=text/javascript></SCRIPT>
<SCRIPT language=javascript type=text/javascript>
google.load("jquery", "1.2");
google.load("jqueryui", "1.5.2");
</SCRIPT>
<SCRIPT src="http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/ui.datepicker-zh-TW.js" type=text/javascript></SCRIPT>
<SCRIPT src="http://doremicat.googlecode.com/files/ui.datepicker.js" type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>
(function($) {
$.datepicker.setDefaults({
  showOn: 'both',
  buttonImageOnly: true,
  buttonImage: 'http://doremicat.googlecode.com/files/calendar.gif',
  buttonText: 'Calendar'
});
$(function() {
  $('#date1').datepicker({
  dateFormat:"yy/mm/dd",
    yearRange:"-20:+20",
    defaultDate:(new Date(new Date().getFullYear()-30+"/01/01")-new Date())/(1000*60*60*24),
    maxDate:new Date()
  });
  $('#date2').datepicker({defaultDate: +7});
});
})(jQuery);
</SCRIPT>