JQueryUI Datepicker元件設定日期高亮
阿新 • • 發佈：2019-01-30
最近在看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函式定義了需要高亮的三個日期，當初始化的日期等於這個日期中的一個的時候，設定這個日期為高亮，否則返回預設值。