
最近在學習 javascript,當然首推的就是
jQuery 了,之前因為懶得做日期表單,因為日期表單需要三種欄位,一個是年,一個是月,一個是日,相當麻煩,一直在那邊 for 迴圈也不是辦法,雖然那是個解決方法,然後我之前用了
xt:Commerce 這套 opensource的程式碼,把日期函式取出來:
[Html] javascript 好用的時間日曆表,不過我認為這方法也太麻煩,因為 jQuery 一行就可以解決的事情,幹麼還要用那個方法呢?
再來呢介紹一下怎麼使用日期函式
步驟一:加上 jQuery 套件到 head 跟 /head 之間
步驟二:加上 ui.datepicker.css 跟 ui.datepicker.js jQuery
UI Date Picker CSS and
the jQuery UI Date Picker Javascript
步驟三:教大家使用四種基本方法:
1. 最基本的語法 (mm/dd/yyyy).
jQuery(function($){
$('#example1').datepicker();
});
2. 加上旁邊圖示也可以進行操作
$('#example2').datepicker({showOn: 'both', showOtherMonths: true,
showWeeks: true, firstDay: 1, changeFirstDay: false,
buttonImageOnly: true, buttonImage: 'calendar.gif'});
3. 改變時間格式
$('#example4').datepicker({dateFormat: 'yy-mm-dd', showOn: 'both',
buttonImageOnly: true, buttonImage: 'calendar.gif'});
4. 選擇日期範圍
$('#exampleRange').datepicker({rangeSelect: true, firstDay: 1, showOn: 'both',
buttonImageOnly: true, buttonImage: 'calendar.gif'});
5. 初始話時間,加7天
#
# 增加7天時間
#
$('input selector').datepicker({defaultDate: +7});
程式執行畫面:
Demo介紹
Demo檔案下載:
datepickerdemo coreuidatepicker
參考網站:
http://docs.jquery.com/UI/Datepicker
http://marcgrabanski.com/code/ui-datepicker/
http://kelvinluck.com/assets/jquery/datePicker/v2/demo/
http://keith-wood.name/datepick.html
Related
Pingback: [jQuery筆記] 時間日期外掛:timepicker | jQuery Plugins | 小惡魔 - 電腦技術 - 生活日記 - 美食介紹 - AppleBOY()
Pingback: [Pear] 利用 Validate 套件驗證 E-mail 多重表單認證 | 小惡魔 - 電腦技術 - 生活日記 - 美食介紹 - AppleBOY()