jQuery UI Datepicker

Marc Grabanski & Keith Wood 製作的 calendar script : jQuery UI Datepicker
目前版本 : jQuey UI Datepicker v3.4.3

安裝步驟:
1. 首先當然是最重要的 jQuery

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 2. 接著include Datepicker 的 CSS & Javascript files <style type="text/css">@import url(ui.datepicker.css);</style> <script type="text/javascript" src="ui.datepicker.js"></script> 3. 如果需要的話, 可以設定 Datepicker 的 global default values $.datepicker.setDefaults({ showOn: 'both', buttonImageOnly: true, buttonImage: 'calendar.gif', buttonText: 'Calendar' }); 4. 呼叫 $.datepicker(); $('#date1').datepicker(); $('#date2').datepicker({defaultDate: +7}); 範例:
date1:
date2:
其他參數: showOn: 'both', // 指定何時顯示日曆, 'focus', 'button', 'both' 三種參數 buttonText: '打開日曆', // 日曆圖片的 alt buttonImage: 'calendar.gif', // 日曆圖片位置 buttonImageOnlt: true, // !!?? firstDay: 1, // 每週開始日期, 1~7 代表 一~日 changeMoneth: true, // 可否改變月份 changeYear: true, // 可否改變年份 minDate: new Date(2005, 1-1, 26), // 最小日期, 放入 Date, int, 與 String maxDate: '30d', // 最大日期, 文字參數 d/w/m/y for days/weeks/months/years dateFormat: 'yyyy/MM/dd', // 日期格式 rangeSelect: true, // 範圍選擇 numberOfMonths: 2, // 顯示多少個日曆, int, [int, int](矩陣方式顯示) stepMonths: 3, // 每次跳幾個月份 prevText: '&lt;&lt;Prev Months', // 配合跳多月份使用 nextText: 'Next Months>>', // 配合跳多月份使用 defaultDate: 2, // 預設日期 // include 語言包 <script type="text/javascript" src="ui.datepicker-zh-TW.js"></script> // inline config <input type="text" size="10" class="inlineConfig" onchange="showDay(this);" date:closeAtTop="false" date:firstDay="1" date:appendText="which is a"/>