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 相关文章推荐
简单JS代码压缩器
Oct 12 Javascript
javascript 函数调用规则
Aug 26 Javascript
Jquery 实现Tab效果 思路是js思路
Mar 02 Javascript
js去除重复字符串两种实现方法
Jan 09 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
Mar 06 Javascript
基于ajax与msmq技术的消息推送功能实现代码
Dec 26 Javascript
jquery+ajax实现省市区三级联动效果简单示例
Jan 04 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 Javascript
小试SVG之新手小白入门教程
Jan 08 Javascript
layui按条件隐藏表格列的实例
Sep 19 Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 Javascript
vue实现公告栏文字上下滚动效果的示例代码
Jun 16 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
农民C键的运用技巧
2020/03/04 星际争霸
php简单判断文本编码的方法
2015/07/30 PHP
thinkPHP简单遍历数组方法分析
2016/05/16 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
IE6下focus与blur错乱的解决方案
2011/07/31 Javascript
jquery 插件学习(六)
2012/08/06 Javascript
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
2014/01/11 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
vue.js项目nginx部署教程
2018/04/05 Javascript
使用Vue组件实现一个简单弹窗效果
2018/04/23 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
2018/09/03 Javascript
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
JS闭包原理与应用经典示例
2018/12/20 Javascript
微信小程序 可搜索的地址选择实现详解
2019/08/28 Javascript
在Python中使用SQLite的简单教程
2015/04/29 Python
Python爬虫实例_城市公交网络站点数据的爬取方法
2018/01/10 Python
python中的内置函数max()和min()及mas()函数的高级用法
2018/03/29 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
Python 中字符串拼接的多种方法
2018/07/30 Python
使用python模拟命令行终端的示例
2019/08/13 Python
pycharm如何实现跨目录调用文件
2020/02/28 Python
浅谈tensorflow 中的图片读取和裁剪方式
2020/06/30 Python
服装销售人员求职自我评价
2013/09/26 职场文书
园林施工员岗位职责
2013/12/11 职场文书
骨干教师培训制度
2014/01/13 职场文书
酒店总经理岗位职责
2014/03/17 职场文书
四风剖析查摆对照检查材料思想汇报
2014/09/24 职场文书
党委工作总结2015
2015/04/27 职场文书
Python3 如何开启自带http服务
2021/05/18 Python
redis实现的四种常见限流策略
2021/06/18 Redis
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android