jQueryUI Datepicker组件设置日期高亮
更新时间：2016年10月13日 10:15:31 作者：kongxx
这篇文章主要介绍了jQueryUI Datepicker组件设置日期高亮的相关方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
最近在看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函数定义了需要高亮的三个日期，当初始化的日期等于这个日期中的一个的时候，设置这个日期为高亮，否则返回默认值。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本篇文章是对jQuery中的ajax技术进行了详细的分析介绍，需要的朋友参考下2013-06-06
我们有时使用jQuery新加元素后，会出现新元素不会执行一部分原有的事件函数。本文主要介绍了jQuery解决添加元素后不执行原有事件的方法，感兴趣的同学可以了解一下2021-11-11
这篇文章主要介绍了JQuery动画animate的stop方法使用,需要的朋友可以参考下2014-05-05
这篇文章主要为大家详细介绍了jQuery实现一组图片循环滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
如果你用过ASP.NET的数据绑定控件，也用过ASP或者JSP里那种通过输出HTML元素在页面上显示数据的方法，你就知道ASP.NET数据绑定控件有多么方便。如果能够将同样的功能在浏览器端用HTML和JavaScript实现，那该是多少美妙的事情。2010-05-05![jQuery中[attribute]选择器用法实例](//img.jbzj.com/images/xgimg/bcimg5.png)
这篇文章主要介绍了jQuery中[attribute]选择器用法,以实例形式分析了[attribute]选择器的功能、定义及匹配给定元素属性的技巧,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
下面小编就为大家分享一篇jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了jQuery显示和隐藏 常用的状态判断方法,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了jQuery取消ajax请求的方法,可实现在Ajax请求超时的情况下取消请求的功能,需要的朋友可以参考下2015-06-06
jquery事件与函数在使用中很频繁，在本文为大家介绍下事件绑定及函数声明和命名函数表达式，感兴趣的朋友可以参考下2013-09-09
![jQuery中[attribute]选择器用法实例](http://img.jbzj.com/images/xgimg/bcimg5.png)
最新评论