功能強大使用方便界面美觀的js日歷

          Posted on 2009-12-17 17:16 terryxue 閱讀(2642) 評論(4)  編輯  收藏 所屬分類: javascript
          因項目需要,又找不到合適的日歷控件,只好把自己幾年前寫的日歷控件拿出來完善使用了,同時也就更新了這篇老的博客,如果你覺得喜歡的話,拿去用吧,不喜歡的話,還請給點改進的建議。
          、效果圖
          1. 日期選擇

          2.日期時間選擇

          3.純時間輸入


          二、功能介紹
          1. 支持所有主流瀏覽器
          2. 只需一條語句就可以將日歷綁定到目標元素上
          3. 支持自定義日期格式
          4. 可以指定回調函數,在日期選擇后觸發
          5. 日歷初始時間為input元素的初始值,input內容為空時默認值取當前系統時間,也可以設置默認值為空
          6. 可以獲取元素上當前選中的時間(Date類型)
          7. 可以直接在文本框中輸入日期和時間,對輸入內容會自動驗證
          8. 支持日期、日期時間、時間三種模式
          9. 可以通過點擊"<,<<"或者">, >>"跳轉月和年,箭頭上長按鼠標可以持續跳轉
          10. 在input元素中滾動鼠標中鍵可以增加或減少輸入值

          三、使用指南
          1. 在頁面中用如下方式導入js和css文件
          <head>
          <link rel="stylesheet" href="datetimepicker.css"/>
          <script language="javascript" src="datetimepicker.js"></script>
          <script src="jquery-{any version}.js"></script><!--jquery 1.3以上版本經測試無問題 -->
          </head>

          2. 在頁面中加入需要綁定日歷的元素,假設代碼為:
          <input type="text" id="c" autocomplete="off"/>(注:設置autocomplete可以防止點輸出框時顯示歷史輸入)

          3. 給元素綁定日歷
          在head部分的script標簽中增加代碼
          <head>
          <script>
           jQuery(function(){
            new DateTimePicker("c");
          })
          </script>
          </head>
          一切搞定,打開網頁,效果如下:


          四、API
          1. 構造方法
          /**
          * @param target (必選項): 目標元素或目標元素Id值
          * @param datetype (可選): 控件類型,可選值有: date(默認), time, datetime
          * @param dateFormat (可選): function/string 用于格式化日期的函數或格式串,日期缺省格式為yyyy-MM-dd
          *       如果dateFormat為函數,則使用此函數來格式化日期,eg:
          *              ?function format(date){ //date表示當前選中的時間
          *                  return date.getFullYear()+"/"+(date.getMonth()+1)+"/"+date.getDate();
          *               }
          *               new DateTimePicker(el, format);
          *       如果dateFormat為string, 則表示格式模式,請使用如下格式:
          *              y表示年,
          *              M表示月,
          *              d表示日期,
          *       如:yy/MM/dd將日期格式化為08/12/31顯示,而yyyy/MM/dd將日期格式化為2008/12/31顯示,也可以使用y,M,d的其它組合方式。
          * @param notShowDefaultValue(可選): 傳入true時表示初次點擊時不顯示默認時間
          */
          function DateTimePicker(target, datetype, dateFormat, notShowDefaultValue){}

          2. 設置選中時間
          當input元素有值時,日歷彈出時將選中input元素中的日期,如果input元素沒有值,則日歷在彈出時默認選中當前時間。
          我們可以使用它的如下方法
          • calendar.setSelectedDate(date);
            設置日歷控件的選中時間,設置時間后關聯的input元素也會以指定的格式顯示這個時間。注:參數為Date類型。

          3. 處理選中事件
          • inputEl.onDateChange回調函數
            我們為input元素綁定日歷后,每次通過日歷控件選中日期,就會觸發input元素上的onDateChange函數,我們可以用如下方式定義:
            inputEl.onDateChange = function(oldDate, newDate){
                      alert("from [" + oldDate+"] to ["+newDate+"]");
                      alert("now date is:" + this._date);
                  }
            第一參數為改變前的時間,第二個參數為新的時間,均為Date類型。
            我們還可以通過訪問inputEl._date得到目標元素上當前選中的時間

          4. 處理onEnterKeyDown
          inputEl.onDateChange = function(){}
          在日歷上回車時觸發。

          下載地址:calendar.rar

          Feedback

          # re: 功能強大使用方便界面美觀的js日歷  回復  更多評論   

          2009-12-18 09:08 by 張曉楓
          不錯。

          # re: 功能強大使用方便界面美觀的js日歷  回復  更多評論   

          2009-12-18 09:11 by 涂小波
          很強大啊!

          # re: 功能強大使用方便界面美觀的js日歷  回復  更多評論   

          2009-12-21 11:58 by 來如風
          沒有農歷,而且現在有關my97已經做得很好了!!

          # re: 功能強大使用方便界面美觀的js日歷  回復  更多評論   

          2009-12-21 12:16 by 非云軟件
          最初我也是用my97的,后來我發現了一個嚴重的bug,在ff的iframe下面的使用時,有時會出現問題。my97開發者也沒有提供源代碼,我報了bug后一直也沒有給我解決,也就是這個原因,所以我開發了這個。

          posts - 9, comments - 24, trackbacks - 0, articles - 0

          Copyright © terryxue

          主站蜘蛛池模板: 平利县| 芜湖县| 始兴县| 衡山县| 肇东市| 格尔木市| 罗山县| 靖安县| 柳江县| 望都县| 周宁县| 凤凰县| 台北县| 芜湖市| 肥东县| 开江县| 海口市| 襄樊市| 遵义市| 宝鸡市| 仁寿县| 衡南县| 临颍县| 大连市| 宁武县| 温宿县| 汨罗市| 运城市| 武宣县| 宝坻区| 堆龙德庆县| 平江县| 阳曲县| 龙胜| 吉安市| 广水市| 如东县| 滕州市| 墨脱县| 东丰县| 合肥市|