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 相关文章推荐
JQuery SELECT单选模拟jQuery.select.js
Nov 12 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
Aug 16 Javascript
深入理解js promise chain
May 05 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
AngularJS压缩JS技巧分析
Nov 08 Javascript
jQuery读取XML文件的方法示例
Feb 03 Javascript
js实现图片左右滚动效果
Feb 27 Javascript
JS实现直接运行html代码的方法
Mar 13 Javascript
微信小程序访问豆瓣电影api的实现方法
Mar 31 Javascript
JavaScript文档加载模式以及元素获取
Jul 28 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 Javascript
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
水质对咖图啡风味的影响具体有哪些
2021/03/03 冲泡冲煮
php实现图片上传并进行替换操作
2016/03/15 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
php修改数组键名的方法示例
2017/04/15 PHP
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
PHP 99乘法表的几种实现代码
2020/10/13 PHP
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
2012/01/13 Javascript
javascript中判断一个值是否在数组中并没有直接使用
2012/12/17 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
2013/04/19 Javascript
js传参数受特殊字符影响错误的解决方法
2013/10/21 Javascript
jquery模拟进度条实现方法
2015/08/03 Javascript
JavaScript设计模式经典之命令模式
2016/02/24 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
JavaScript性能优化总结之加载与执行
2016/08/11 Javascript
利用JQuery阻止事件冒泡
2016/12/01 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
2017/11/27 Javascript
AngularJs 禁止模板缓存的方法
2017/11/28 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
turn.js异步加载实现翻书效果
2019/07/25 Javascript
vue实现数字滚动效果
2020/06/29 Javascript
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
Selenium alert 弹窗处理的示例代码
2020/08/06 Python
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
美国婴儿和儿童家具网上商店:ABaby.com
2018/07/02 全球购物
美国校服网上商店:French Toast
2019/10/08 全球购物
校运会入场式解说词
2014/02/10 职场文书
离职感谢信
2015/01/21 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
高中地理教学反思
2016/02/19 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书
小学三年级作文之写景
2019/11/05 职场文书
SpringBoot 集成Redis 过程
2021/06/02 Redis
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python