1 頁 (共 1 頁)

日曆函數jquery

發表於 : 週五 12月 14, 2012 3:17 pm
布魯斯
1.加上 jQuery 套件到 head 跟 /head 之間

代碼: 選擇全部

<script src="http://code.jquery.com/jquery-latest.js"></script>
2.加上 ui.datepicker.css 跟 ui.datepicker.js jQuery

代碼: 選擇全部

<!-- Include Core Datepicker Stylesheet -->		
<link rel="stylesheet" href="ui.datepicker.css" type="text/css" media="screen" title="core css file" charset="utf-8" />
<!-- Include Core Datepicker JavaScript -->
<script src="ui.datepicker.js" type="text/javascript" charset="utf-8"></script>
3.加入語法

基本的語法 (mm/dd/yyyy)

代碼: 選擇全部

jQuery(function($){
  $('#example1').datepicker();
});
加上旁邊圖示也可以進行操作

代碼: 選擇全部

$('#example2').datepicker({showOn: 'both', showOtherMonths: true, 
        showWeeks: true, firstDay: 1, changeFirstDay: false,
        buttonImageOnly: true, buttonImage: 'calendar.gif'});
改變時間格式

代碼: 選擇全部

$('#example4').datepicker({dateFormat: 'yy-mm-dd', showOn: 'both', 
            buttonImageOnly: true, buttonImage: 'calendar.gif'});
選擇日期範圍

代碼: 選擇全部

$('#exampleRange').datepicker({rangeSelect: true, firstDay: 1, showOn: 'both', 
            buttonImageOnly: true, buttonImage: 'calendar.gif'});
初始化時間,加7天

代碼: 選擇全部

$('input selector').datepicker({defaultDate: +7});
參考:
http://blog.wu-boy.com/2008/04/jquery%E ... %E5%BC%8F/
http://docs.jquery.com/UI/Datepicker
http://marcgrabanski.com/articles/jquery-ui-datepicker

datepicker.zip
datepicker
(17.38 KiB) 已下載 80 次