最近在看JQueryUI Datepicker組件的時(shí)候想到有時(shí)候我們需要高亮某些日期，而不僅僅是當(dāng)前日期和選中的日期，這是我們就需要在日歷組件初始化的時(shí)候給某些日期設(shè)置成高亮，以表示這些日期和其它日期有區(qū)別，比如說(shuō)可以表示這些日期有一些meeting或者task。對(duì)于這種需求可以通過(guò)使用組件的beforeShowDay(date)函數(shù)來(lái)實(shí)現(xiàn)，這個(gè)函數(shù)會(huì)在Datepicker組件初始化的時(shí)候?qū)τ诿恳惶於颊{(diào)用一次這個(gè)函數(shù)來(lái)做一些定制的功能，從而正好可以實(shí)現(xiàn)我們所要的需求。
下面來(lái)看怎樣實(shí)現(xiàn)
首先下載jquery-ui-1.11.1包，并解壓。
然后在jquery-ui-1.11.1目錄下創(chuàng)建一個(gè)calenar.html文件用來(lái)測(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í)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
