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


Posted in jQuery onMarch 29, 2017

本文实例讲述了jQuery日程管理控件glDatePicker用法。分享给大家供大家参考,具体如下:

之前接触过一款日程管理控件,叫 FullCalendar ,功能很强大,会列出每天的事项,可选择编辑并且可以定制自己的日历,然而,有时候,我们的网页上只需要一个简单的日历,迷你但实用,有日程安排的日期高亮显示,可跳转日期,可选择日期等等基本功能都应该具备,而这时 FullCalendar 就显得太过庞大了,所以,就有了我对 glDatePicker 控件的学习。

先看效果:

jQuery日程管理控件glDatePicker用法详解 jQuery日程管理控件glDatePicker用法详解 jQuery日程管理控件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 请移步 官网。

jQuery 相关文章推荐
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
使用jQuery实现购物车结算功能
Aug 15 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
jQuery实现滚动效果
Nov 17 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
jQuery 动态粒子效果示例代码
Jul 07 jQuery
jQuery实现简单评论功能
Aug 19 jQuery
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 #jQuery
jQuery实现的手风琴侧边菜单效果
Mar 29 #jQuery
jQuery实现字体颜色渐变效果的方法
Mar 29 #jQuery
jquery实现tab键进行选择后enter键触发click行为
Mar 29 #jQuery
jQuery插件之validation插件
Mar 29 #jQuery
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 #jQuery
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 #jQuery
You might like
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
侧栏跟随滚动的简单实现代码
2013/03/18 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
Vue表单验证插件Vue Validator使用方法详解
2017/04/07 Javascript
javascript 封装Date日期类实例详解
2017/05/28 Javascript
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
2017/08/21 Javascript
web前端页面生成exe可执行文件的方法
2018/02/08 Javascript
JS实现移动端触屏拖拽功能
2018/07/31 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
微信小程序实现签到功能
2018/10/31 Javascript
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
2020/03/17 Javascript
[50:48]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
用python实现一个简单的验证码
2020/12/09 Python
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
耐克亚太地区:Nike APAC
2019/12/07 全球购物
几道PHP面试题
2013/04/14 面试题
教师的实习鉴定
2013/12/15 职场文书
优秀教师事迹简介
2014/02/02 职场文书
城管综合整治方案
2014/05/01 职场文书
实习计划书范文
2015/01/16 职场文书
财务工作个人总结
2015/02/27 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
停水通知
2015/04/16 职场文书
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android