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 控制文本框自动缩小字体填充
Jun 16 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
jQuery pagination分页示例详解
Oct 23 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
jquery实现上传图片功能
Jun 29 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 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开发文件系统实例讲解
2006/10/09 PHP
Windows Apache2.2.11及Php5.2.9-1的安装与配置方法
2009/06/08 PHP
详解PHP中的Traits
2015/07/29 PHP
php htmlentities()函数的定义和用法
2016/05/13 PHP
PHP操作mysql数据库分表的方法
2016/06/09 PHP
图文详解PHP环境搭建教程
2016/07/16 PHP
Webkit的跨域安全问题说明
2011/09/13 Javascript
js精度溢出解决方案
2012/12/02 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
node.js实现爬虫教程
2020/08/25 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
2018/02/11 Javascript
js动态引入的四种方法
2018/05/05 Javascript
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
微信小程序之左右布局的实现代码
2019/12/13 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
vue iview 隐藏Table组件里的某一列操作
2020/11/13 Javascript
Python获取linux主机ip的简单实现方法
2016/04/18 Python
Python日志syslog使用原理详解
2020/02/18 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
介绍一下linux文件系统分配策略
2013/02/25 面试题
总裁秘书岗位职责
2013/12/04 职场文书
外企求职信范文分享
2013/12/31 职场文书
粗加工管理制度
2014/02/04 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
《陈毅探母》教学反思
2014/05/01 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
爱牙日活动总结
2014/08/29 职场文书
教师批评与自我批评剖析材料
2014/10/16 职场文书
班主任自我评价范文
2015/03/11 职场文书
Python实现byte转integer
2021/06/03 Python
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL