日曆函數jquery

[布魯斯]

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) 已下載 79 次