<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

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

    Posted on 2009-12-17 17:16 terryxue 閱讀(2639) 評論(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

    主站蜘蛛池模板: 成人免费网站久久久| 亚洲精品美女久久久久| 亚洲av日韩综合一区二区三区| 7723日本高清完整版免费| 亚洲另类视频在线观看| 免费无码AV电影在线观看| 亚洲午夜无码久久久久软件 | 亚洲情A成黄在线观看动漫软件 | 亚洲w码欧洲s码免费| 亚洲人成在线精品| 免费无码又爽又刺激聊天APP| 亚洲国产精品无码久久| 免费大学生国产在线观看p| jizz免费观看| 亚洲日本一区二区三区| 国产va精品免费观看| 福利片免费一区二区三区| 亚洲精品国产精品乱码在线观看| 国产啪精品视频网站免费尤物| 亚洲黄色网址在线观看| 97无码免费人妻超级碰碰夜夜| 免费看黄网站在线看| 亚洲AV无码国产精品色午友在线| 精品免费人成视频app| 亚洲国产精品日韩av不卡在线| 国产AV无码专区亚洲AV漫画 | 黄色网址在线免费| 亚洲精品福利你懂| 亚洲乱码中文字幕综合234| 99久久免费精品视频| 亚洲日韩国产AV无码无码精品| 亚洲无码日韩精品第一页| 91九色老熟女免费资源站| 粉色视频在线观看www免费| 亚洲av日韩av天堂影片精品| 青青青免费国产在线视频小草| 亚洲成a人片在线不卡一二三区 | 国产成人亚洲影院在线观看| 在线观看永久免费| 国产亚洲人成在线影院| 久久亚洲精品无码AV红樱桃|