本文實(shí)例講述了jQuery日程管理控件glDatePicker用法。分享給大家供大家參考，具體如下：
之前接觸過一款日程管理控件，叫 FullCalendar ，功能很強(qiáng)大，會(huì)列出每天的事項(xiàng)，可選擇編輯并且可以定制自己的日歷，然而，有時(shí)候，我們的網(wǎng)頁上只需要一個(gè)簡單的日歷，迷你但實(shí)用，有日程安排的日期高亮顯示，可跳轉(zhuǎn)日期，可選擇日期等等基本功能都應(yīng)該具備，而這時(shí) FullCalendar 就顯得太過龐大了，所以，就有了我對(duì) glDatePicker 控件的學(xué)習(xí)。
先看效果：
橘紅色表示當(dāng)前選擇的日期，藍(lán)色表示今天日期，綠色表示特使日期，可以理解為有日程安排的日期，關(guān)于顏色名稱的描述可能不準(zhǔn)確，就不要深究了。。。另外，后面兩張圖片可以看出是可以跳轉(zhuǎn)到指定日期的。
該控件有多個(gè)皮膚，只需要選擇對(duì)應(yīng)的自己覺得好看的 css 文件即可，本例中為默認(rèn)樣式。
該控件還可以設(shè)置哪些日期可選，哪些不可選，可以捆綁數(shù)據(jù)，可以監(jiān)聽點(diǎn)擊事件和鼠標(biāo)懸浮等等。
有一點(diǎn)需要注意的是，該控件為 datePicker 控件，一般需要通過其他頁面元素來觸發(fā)，也就是說該控件往往是跟在一個(gè) input 之后的，但是現(xiàn)在需要的是日程管理，而不是日期選擇，所以，我們不需要有其他控件的出現(xiàn)，這里我用了一個(gè)很原始的辦法來解決的，就是寫一個(gè)空的 div ，設(shè)置其寬為200px ，高為0，并且設(shè)置該日歷始終顯示，這樣就可以基本解決問題了。
下面是控件的快速使用方法：
<link href="glDatePicker.default.css" rel="external nofollow" rel="stylesheet" type="text/css"/><script type='text/javascript' src="jquery-1.9.1.js"></script><script type='text/javascript' src="glDatePicker.min.js"></script><body> <div id="test"></div></body>
#test{ width: 200px; height: 0;}$(function () { $('#test').glDatePicker( { showAlways: true, //一直顯示，也可以點(diǎn)擊文本框觸發(fā)，當(dāng)純粹datePicker使用 //dowNames: ['日', '一', '二', '三', '四', '五', '六'], //monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'], 漢化 specialDates: [ { date: new Date(2013, 9, 16), data: jsonObject //jsonObject數(shù)據(jù)，可以根據(jù)需要設(shè)計(jì) } ], onClick: function(target, cell, date, data) { //TODO } });})specialDates 就是日程安排的關(guān)鍵參數(shù)了，我們從數(shù)據(jù)庫中讀取數(shù)據(jù)，然后將這些數(shù)據(jù)按照預(yù)定的格式傳給控件就行了，值是一個(gè)列表，可以有多個(gè)日程。然后就是 onclick 事件方法的編寫了，可以彈窗啊，打開網(wǎng)頁啊等等，看自己需要了。
這里主要介紹了它日程管理的應(yīng)用，略過了其他參數(shù)的解釋，更多使用說明和 Demo 請(qǐng)移步 官網(wǎng)。
PS：這里再為大家推薦幾款時(shí)間及日期相關(guān)工具供大家參考使用：
在線日期/天數(shù)計(jì)算器：
http://tools.VeVB.COm/jisuanqi/date_jisuanqi
在線日期計(jì)算器/相差天數(shù)計(jì)算器：
http://tools.VeVB.COm/jisuanqi/datecalc
在線日期天數(shù)差計(jì)算器：
http://tools.VeVB.COm/jisuanqi/onlinedatejsq
Unix時(shí)間戳(timestamp)轉(zhuǎn)換工具：
http://tools.VeVB.COm/code/unixtime
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery日期與時(shí)間操作技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
