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插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
jQuery 移除事件的方法
Jun 20 jQuery
jQuery冲突问题解决方法
Jan 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 验证码的实现代码
2011/07/17 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
PHP isset empty函数相关面试题及解析
2020/12/11 PHP
IE/FireFox具备兼容性的拖动代码
2007/08/13 Javascript
Web开发者必备的12款超赞jQuery插件
2010/12/03 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
JavaScript程序设计之JS调试
2015/12/09 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
2016/08/15 Javascript
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
微信小程序实现多个按钮的颜色状态转换
2019/02/15 Javascript
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
Python发送form-data请求及拼接form-data内容的方法
2016/03/05 Python
python实现决策树分类
2018/08/30 Python
Pycharm以root权限运行脚本的方法
2019/01/19 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
澳大利亚在线奢侈品时尚零售平台:Azura Runway
2021/01/13 全球购物
介绍一下.net和Java的特点和区别
2012/09/26 面试题
介绍一下linux的文件系统
2012/03/20 面试题
质检的岗位职责
2013/11/17 职场文书
心理健康课教学反思
2014/02/13 职场文书
岗位竞聘书范文
2014/03/31 职场文书
《学会合作》教学反思
2014/04/12 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
2015新学期家长寄语
2015/02/26 职场文书
仓管员岗位职责范本
2015/04/01 职场文书
初三英语教学反思
2016/02/15 职场文书