最近在看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函數定義了需要高亮的三個日期，當初始化的日期等於這個日期中的一個的時候，設置這個日期為高亮，否則返回默認值。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。