[jQuery筆記] 好用的日期函式 datepicker

100 (by appleboy46) 最近在學習 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});
程式執行畫面: 102 (by appleboy46) 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
  • Pingback: [jQuery筆記] 時間日期外掛:timepicker | jQuery Plugins | 小惡魔 - 電腦技術 - 生活日記 - 美食介紹 - AppleBOY()

  • Pingback: [Pear] 利用 Validate 套件驗證 E-mail 多重表單認證 | 小惡魔 - 電腦技術 - 生活日記 - 美食介紹 - AppleBOY()

  • 我之前不知道為為什麼在用jquery的ui的時候總是鬼擋牆
    怎麼用都不對
    看了你這篇教學真的幫了我很多

    再次感謝

  • Chu

    我將這個加入表單, 選擇日期後, 利用 post 的方式將日期資料 mail 到我的郵箱,
    但所選的日期無法呈現出來.
    我用的指令, 有什麼錯誤嗎?
    日期:”.$_POST[‘dateinput’].”

  • 你應該先檢查 input 輸出有無資料,可以利用 print_r($_POST) 方式
    看看是否有無 dateinput 資料。

  • Chu

    很抱歉, 初學者而已, 不曉得 print_r($_POST) 的用法, 可以請您多提點一些嗎? 感激不盡..

  • Chu

    我開個新檔,加入

    顯示結果空的,沒資料, 我用的指令有錯嗎?

  • bbit

    好像如果id 是array (ex: date[0][0]) 就不行了..有方法解決嗎

  • Chu

    無解 .. 輸出無資料.. 沒技術支援.. 放棄了..

  • 哈囉 chu:
    您可以參考底下網站,這網站做的不錯
    http://marcgrabanski.com/pages/code/jquery-ui-datepicker
    也蠻簡單的,我的檔案可能有些問題,讓你跑不出來
    CSS 部份要修改喔

  • 版大
    請教一下
    要如何修改才能讓「年」固定在1911-2009,不會在隨著選擇而變動,謝謝你

  • 嗯嗯,你可以參考底下這個網站
    http://keith-wood.name/datepick.html

    [cc lang=”javascript”]
    $(‘#minmax2Datepicker’).datepick({minDate: ’01/26/2007′,
    maxDate: ’01/26/2009′, showOn: ‘both’,
    buttonImageOnly: true, buttonImage: ‘img/calendar.gif’});
    [/cc]

  • 謝謝版大解答
    可是安裝後卻出現以下錯誤訊息是 .$’datepicker’ null或不是一個物件
    網址:http://ipurge.ezgoshop.tw/event/try090810/try-event.php

  • 我已找到之前安裝多餘程式碼
    原來是移除不乾淨,哈哈

  • Hudson Chen

    not working in IE9