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

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

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

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

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

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

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

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

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

您可能感興趣的文章:

相關(guān)文章

jQuery之a(chǎn)jax技術(shù)的詳細(xì)介紹
本篇文章是對(duì)jQuery中的ajax技術(shù)進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下
2013-06-06
jQuery解決添加元素后不執(zhí)行原有事件的方法
我們有時(shí)使用jQuery新加元素后，會(huì)出現(xiàn)新元素不會(huì)執(zhí)行一部分原有的事件函數(shù)。本文主要介紹了jQuery解決添加元素后不執(zhí)行原有事件的方法，感興趣的同學(xué)可以了解一下
2021-11-11
JQuery動(dòng)畫animate的stop方法使用詳解
這篇文章主要介紹了JQuery動(dòng)畫animate的stop方法使用,需要的朋友可以參考下
2014-05-05
jQuery實(shí)現(xiàn)一組圖片循環(huán)滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)一組圖片循環(huán)滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-01-01
jQuery模板技術(shù)和數(shù)據(jù)綁定實(shí)現(xiàn)代碼
如果你用過ASP.NET的數(shù)據(jù)綁定控件，也用過ASP或者JSP里那種通過輸出HTML元素在頁面上顯示數(shù)據(jù)的方法，你就知道ASP.NET數(shù)據(jù)綁定控件有多么方便。如果能夠?qū)⑼瑯拥墓δ茉跒g覽器端用HTML和JavaScript實(shí)現(xiàn)，那該是多少美妙的事情。
2010-05-05
jQuery中[attribute]選擇器用法實(shí)例
這篇文章主要介紹了jQuery中[attribute]選擇器用法,以實(shí)例形式分析了[attribute]選擇器的功能、定義及匹配給定元素屬性的技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2014-12-12
jquery實(shí)現(xiàn)點(diǎn)擊a鏈接,跳轉(zhuǎn)之后,該a鏈接處顯示背景色的方法
下面小編就為大家分享一篇jquery實(shí)現(xiàn)點(diǎn)擊a鏈接,跳轉(zhuǎn)之后,該a鏈接處顯示背景色的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-01-01
jQuery顯示和隱藏常用的狀態(tài)判斷方法
這篇文章主要介紹了jQuery顯示和隱藏常用的狀態(tài)判斷方法,需要的朋友可以參考下
2015-01-01
jQuery取消ajax請(qǐng)求的方法
這篇文章主要介紹了jQuery取消ajax請(qǐng)求的方法,可實(shí)現(xiàn)在Ajax請(qǐng)求超時(shí)的情況下取消請(qǐng)求的功能,需要的朋友可以參考下
2015-06-06
jquery事件與函數(shù)的使用介紹
jquery事件與函數(shù)在使用中很頻繁，在本文為大家介紹下事件綁定及函數(shù)聲明和命名函數(shù)表達(dá)式，感興趣的朋友可以參考下
2013-09-09