快捷導(dǎo)航

jQuery日程管理控件glDatePicker用法詳解

更新時(shí)間：2017年03月29日 12:15:19 作者：忘了滋味1219

這篇文章主要介紹了jQuery日程管理控件glDatePicker用法,結(jié)合具體實(shí)例形式分析了jQuery控件glDatePicker的簡(jiǎn)單使用技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了jQuery日程管理控件glDatePicker用法。分享給大家供大家參考，具體如下：

之前接觸過(guò)一款日程管理控件，叫 FullCalendar ，功能很強(qiáng)大，會(huì)列出每天的事項(xiàng)，可選擇編輯并且可以定制自己的日歷，然而，有時(shí)候，我們的網(wǎng)頁(yè)上只需要一個(gè)簡(jiǎn)單的日歷，迷你但實(shí)用，有日程安排的日期高亮顯示，可跳轉(zhuǎn)日期，可選擇日期等等基本功能都應(yīng)該具備，而這時(shí) FullCalendar 就顯得太過(guò)龐大了，所以，就有了我對(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 控件，一般需要通過(guò)其他頁(yè)面元素來(lái)觸發(fā)，也就是說(shuō)該控件往往是跟在一個(gè) input 之后的，但是現(xiàn)在需要的是日程管理，而不是日期選擇，所以，我們不需要有其他控件的出現(xiàn)，這里我用了一個(gè)很原始的辦法來(lái)解決的，就是寫一個(gè)空的 div ，設(shè)置其寬為200px ，高為0，并且設(shè)置該日歷始終顯示，這樣就可以基本解決問(wèn)題了。

下面是控件的快速使用方法：

<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ù)庫(kù)中讀取數(shù)據(jù)，然后將這些數(shù)據(jù)按照預(yù)定的格式傳給控件就行了，值是一個(gè)列表，可以有多個(gè)日程。然后就是 onclick 事件方法的編寫了，可以彈窗啊，打開網(wǎng)頁(yè)啊等等，看自己需要了。

這里主要介紹了它日程管理的應(yīng)用，略過(guò)了其他參數(shù)的解釋，更多使用說(shuō)明和 Demo 請(qǐng)移步官網(wǎng)。

PS：這里再為大家推薦幾款時(shí)間及日期相關(guān)工具供大家參考使用：

在線日期/天數(shù)計(jì)算器：
http://tools.jb51.net/jisuanqi/date_jisuanqi

在線日期計(jì)算器/相差天數(shù)計(jì)算器：
http://tools.jb51.net/jisuanqi/datecalc

在線日期天數(shù)差計(jì)算器：
http://tools.jb51.net/jisuanqi/onlinedatejsq

Unix時(shí)間戳(timestamp)轉(zhuǎn)換工具：
http://tools.jb51.net/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ì)有所幫助。

您可能感興趣的文章: