首頁 > 開發者 > JavaScript
jQuery議程管理控制項glDatePicker用法詳解，jquerygldatepicker
本文執行個體講述了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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
