jQueryUI Datepicker组件设置日期高亮


Posted in Javascript onOctober 13, 2016

最近在看JQueryUI Datepicker组件的时候想到有时候我们需要高亮某些日期,而不仅仅是当前日期和选中的日期,这是我们就需要在日历组件初始化的时候给某些日期设置成高亮,以表示这些日期和其它日期有区别,比如说可以表示这些日期有一些meeting或者task。对于这种需求可以通过使用组件的beforeShowDay(date)函数来实现,这个函数会在Datepicker组件初始化的时候对于每一天都调用一次这个函数来做一些定制的功能,从而正好可以实现我们所要的需求。

下面来看怎样实现

首先下载jquery-ui-1.11.1包,并解压。

然后在jquery-ui-1.11.1目录下创建一个calenar.html文件用来测试。

calenar.html的内容如下:

<!doctype html>
<html lang="us">
<head>
 <meta charset="utf-8">
 <title>jQuery UI Example Page</title>
 <link href="jquery-ui.css" rel="stylesheet">
 <style>
 td.highlight {border: none !important;padding: 1px 0 1px 1px !important;background: none !important;overflow:hidden;}
 td.highlight a {background: #AABBCC !important; border: 1px #88a276 solid !important;}
 </style>
 <script src="external/jquery/jquery.js"></script>
 <script src="jquery-ui.js"></script>
 <script>
 $(function() {
  $( "#datepicker" ).datepicker({
  inline: true,
  showButtonPanel: true,
  onSelect: function (dateText, inst) {
   alert(dateText);
  },
  beforeShowDay: function(date) {
   var dates = ['09/01/2014', '09/02/2014', '10/01/2014'];
   var tips = ['09/01/2014', '09/02/2014', '10/01/2014'];
   for (var i = 0; i < dates.length; i++) {
   if (new Date(dates[i]).toString() == date.toString()) {
    return [true, 'highlight', tips[i]];
   }
   }
   return [true, ''];
  }
  });
 });
 </script>
</head>
<body>
<div id="datepicker"></div>
</body>
</html>

其中beforeShowDay函数定义了需要高亮的三个日期,当初始化的日期等于这个日期中的一个的时候,设置这个日期为高亮,否则返回默认值。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScrip单线程引擎工作原理分析
Sep 04 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
May 17 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
Feb 19 Javascript
微信小程序页面传值实例分析
Apr 19 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 Javascript
Vue组件系列开发之模态框
Apr 18 Javascript
DatePickerDialog 自定义样式及使用全解
Jul 09 Javascript
laydate只显示时分 不显示秒的功能实现方法
Sep 28 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
Jul 11 Javascript
vue绑定数字类型 value为数字的实例
Aug 31 Javascript
jQuery实现购物车全功能
Jan 11 jQuery
js拼接html字符串的注意事项
Oct 13 #Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 #Javascript
微信小程序 wx.request(OBJECT)发起请求详解
Oct 13 #Javascript
JS版微信6.0分享接口用法分析
Oct 13 #Javascript
js实现html table 行,列锁定的简单实例
Oct 13 #Javascript
微信小程序 SocketIO 实例讲解
Oct 13 #Javascript
简单谈谈JS数组中的indexOf方法
Oct 13 #Javascript
You might like
重置版宣传动画
2020/04/09 魔兽争霸
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
php创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
js正则表达式的使用详解
2013/07/09 Javascript
jquery动态添加option示例
2013/12/30 Javascript
javascript ajax的5种状态介绍
2014/08/18 Javascript
详解JavaScript中getFullYear()方法的使用
2015/06/10 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
JS实现的简单表单验证功能完整实例
2017/10/14 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
在Python中实现贪婪排名算法的教程
2015/04/17 Python
利用Python命令行传递实例化对象的方法
2016/11/02 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
PyCharm MySQL可视化Database配置过程图解
2020/06/09 Python
css3.0新属性效果在ie下的解决方案
2010/05/10 HTML / CSS
英国最大的宠物食品和宠物用品网上零售商: Zooplus
2016/08/01 全球购物
德国香水、化妆品和护理产品网上商店:Parfumdreams
2018/09/26 全球购物
SmartBuyGlasses意大利:购买太阳镜、眼镜和隐形眼镜
2018/11/20 全球购物
用JAVA SOCKET编程,读服务器几个字符,再写入本地显示
2012/11/25 面试题
应聘自荐书
2013/10/08 职场文书
如何掌握自荐信格式呢
2013/11/19 职场文书
请假条的格式
2014/04/11 职场文书
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
演讲开场白台词大全
2015/05/29 职场文书
军训后的感想
2015/08/07 职场文书
幼儿教师远程研修感悟
2015/11/18 职场文书
学习型家庭事迹材料(2016精选版)
2016/02/29 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书