[jQuery筆記] 好用的日期函式 datepicker
Apr 30th, 2008 by appleboy 參觀者：22,088Views 機器人：967Views
最近在學習 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).
$('#example1').datepicker();
});
2. 加上旁邊圖示也可以進行操作
showWeeks: true, firstDay: 1, changeFirstDay: false,
buttonImageOnly: true, buttonImage: 'calendar.gif'});
3. 改變時間格式
buttonImageOnly: true, buttonImage: 'calendar.gif'});
4. 選擇日期範圍
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 View
[...] jQuery 的 plugin：[jQuery筆記] 好用的日期函式 datepicker，然後現在又需要用到時間的外掛，因為 datepicker [...]
[...] 1. Validate::date 這部份我比較不推薦用這裡的方法，可以用 jQuery 的套件：[jQuery筆記] 好用的日期函式 datepicker，那底下是這個函式用法：必須多安裝 Pear Date 套件 /** * [...]
我之前不知道為為什麼在用jquery的ui的時候總是鬼擋牆
怎麼用都不對
看了你這篇教學真的幫了我很多
再次感謝
我將這個加入表單, 選擇日期後, 利用 post 的方式將日期資料 mail 到我的郵箱,
但所選的日期無法呈現出來.
我用的指令, 有什麼錯誤嗎?
日期：”.$_POST['dateinput'].”
你應該先檢查 input 輸出有無資料，可以利用 print_r($_POST) 方式
看看是否有無 dateinput 資料。
很抱歉, 初學者而已, 不曉得 print_r($_POST) 的用法, 可以請您多提點一些嗎? 感激不盡..
我開個新檔,加入
顯示結果空的,沒資料, 我用的指令有錯嗎?
好像如果id 是array (ex: date[0][0]) 就不行了..有方法解決嗎
無解 .. 輸出無資料.. 沒技術支援.. 放棄了..
哈囉 chu：
您可以參考底下網站，這網站做的不錯
http://marcgrabanski.com/pages/code/jquery-ui-datepicker
也蠻簡單的，我的檔案可能有些問題，讓你跑不出來
CSS 部份要修改喔
版大
請教一下
要如何修改才能讓「年」固定在1911-2009，不會在隨著選擇而變動，謝謝你
嗯嗯，你可以參考底下這個網站
http://keith-wood.name/datepick.html
maxDate: '01/26/2009', showOn: 'both',
buttonImageOnly: true, buttonImage: 'img/calendar.gif'});
謝謝版大解答
可是安裝後卻出現以下錯誤訊息是 .$’datepicker’ null或不是一個物件
網址：http://ipurge.ezgoshop.tw/event/try090810/try-event.php
我已找到之前安裝多餘程式碼
原來是移除不乾淨，哈哈