快捷導(dǎo)航

jQueryUI Datepicker組件設(shè)置日期高亮

更新時間：2016年10月13日 10:15:31 作者：kongxx

這篇文章主要介紹了jQueryUI Datepicker組件設(shè)置日期高亮的相關(guān)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

最近在看JQueryUI Datepicker組件的時候想到有時候我們需要高亮某些日期，而不僅僅是當(dāng)前日期和選中的日期，這是我們就需要在日歷組件初始化的時候給某些日期設(shè)置成高亮，以表示這些日期和其它日期有區(qū)別，比如說可以表示這些日期有一些meeting或者task。對于這種需求可以通過使用組件的beforeShowDay(date)函數(shù)來實現(xiàn)，這個函數(shù)會在Datepicker組件初始化的時候?qū)τ诿恳惶於颊{(diào)用一次這個函數(shù)來做一些定制的功能，從而正好可以實現(xiàn)我們所要的需求。

下面來看怎樣實現(xiàn)

首先下載jquery-ui-1.11.1包，并解壓。

然后在jquery-ui-1.11.1目錄下創(chuàng)建一個calenar.html文件用來測試。

calenar.html的內(nèi)容如下：

<!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函數(shù)定義了需要高亮的三個日期，當(dāng)初始化的日期等于這個日期中的一個的時候，設(shè)置這個日期為高亮，否則返回默認(rèn)值。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: