本文實例講述了jQuery日程管理控件glDatePicker用法。分享給大家供大家參考，具體如下：
之前接觸過一款日程管理控件，叫 FullCalendar ，功能很強大，會列出每天的事項，可選擇編輯並且可以定制自己的日歷，然而，有時候，我們的網頁上只需要一個簡單的日歷，迷你但實用，有日程安排的日期高亮顯示，可跳轉日期，可選擇日期等等基本功能都應該具備，而這時 FullCalendar 就顯得太過龐大了，所以，就有了我對 glDatePicker 控件的學習。
先看效果：
橘紅色表示當前選擇的日期，藍色表示今天日期，綠色表示特使日期，可以理解為有日程安排的日期，關於顏色名稱的描述可能不准確，就不要深究了。。。另外，後面兩張圖片可以看出是可以跳轉到指定日期的。
該控件有多個皮膚，只需要選擇對應的自己覺得好看的 css 文件即可，本例中為默認樣式。
該控件還可以設置哪些日期可選，哪些不可選，可以捆綁數據，可以監聽點擊事件和鼠標懸浮等等。
有一點需要注意的是，該控件為 datePicker 控件，一般需要通過其他頁面元素來觸發，也就是說該控件往往是跟在一個 input 之後的，但是現在需要的是日程管理，而不是日期選擇，所以，我們不需要有其他控件的出現，這裡我用了一個很原始的辦法來解決的，就是寫一個空的 div ，設置其寬為200px ，高為0，並且設置該日歷始終顯示，這樣就可以基本解決問題了。
下面是控件的快速使用方法：
<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, //一直顯示，也可以點擊文本框觸發，當純粹datePicker使用
//dowNames: ['日', '一', '二', '三', '四', '五', '六'],
//monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'], 漢化
specialDates: [
{
date: new Date(2013, 9, 16),
data: jsonObject //jsonObject數據，可以根據需要設計
}
],
onClick: function(target, cell, date, data) {
//TODO
}
});
})
specialDates 就是日程安排的關鍵參數了，我們從數據庫中讀取數據，然後將這些數據按照預定的格式傳給控件就行了，值是一個列表，可以有多個日程。然後就是 onclick 事件方法的編寫了，可以彈窗啊，打開網頁啊等等，看自己需要了。
這裡主要介紹了它日程管理的應用，略過了其他參數的解釋，更多使用說明和 Demo 請移步 官網。
PS：這裡再為大家推薦幾款時間及日期相關工具供大家參考使用：
在線日期/天數計算器：
http://tools.jb51.net/jisuanqi/date_jisuanqi
在線日期計算器/相差天數計算器：
http://tools.jb51.net/jisuanqi/datecalc
在線日期天數差計算器：
http://tools.jb51.net/jisuanqi/onlinedatejsq
Unix時間戳(timestamp)轉換工具：
http://tools.jb51.net/code/unixtime
更多關於jQuery相關內容感興趣的讀者可查看本站專題：《jQuery日期與時間操作技巧總結》、《jQuery拖拽特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》
希望本文所述對大家jQuery程序設計有所幫助。