[b][align=center][size=small]jQuery UI 添加法定節假日顯示[/size][/align][/b]


有新需求了，填寫日歷的時候需要顯示法定節假日。 在網上了解了一下，沒有類似控件。尤其在涉及到農歷時，沒有計算方法，只能固定顯示。強大的My97DatePicker也不行。
最后決定在現有基礎上改一下，項目是用的jQueryUI,研究了一下代碼，借鑒了一下公司官網的代碼。終于實現了，以最小的改動實現的。不過法定節假日需要過段時間更新，因為是寫在一個數組里面。沒有固定的算法計算不出法定節假日。
大概的實現說一下。jQuery UI 版本為1.9.2。
在7271行添加如下代碼：

......
// add by sw 2013-12-11
this.festival = ['2013-9-19','2013-10-1','2014-1-1','2014-1-30','2014-1-31','2014-2-14','2014-4-5','2014-5-1','2014-6-2','2014-9-8','2014-10-1'];
this.festival_name = ['-224','-256','0','-32','-64','-96','-128','-164','-196','-224','-256'];
// end
......

在8781行添加：

......
// add by sw 2013-12-11
var _tempTime = printDate.getFullYear()+"-"+(printDate.getMonth()+1)+"-"+printDate.getDate();
var _tempClass = "";
var _tempCss = "";
var _tempFlag = false;
for(var $b=0;$b<this.festival.length;$b++){
//alert(this.festival[$b]+"|||"+_tempTime);
if(this.festival[$b]==_tempTime){
_tempFlag = true;
_tempClass = "festival_input "; //color:#FFFFFF;
_tempCss = 'style="background-position:left '+this.festival_name[$b] + 'px" ';
break;
}
} ......
//end


(otherMonth && !showOtherMonths ? '?' : // display for other months // add by shuwen 2013-12-11
(unselectable ? '<span class="ui-state-default">' + printDate.getDate() + '</span>' : '<a class="'+ (_tempFlag?_tempClass:'ui-state-default') +
(printDate.getTime() == today.getTime() ? ' ui-state-highlight' : '') +
(printDate.getTime() == currentDate.getTime() ? ' festival_default ui-state-active' : '') + // highlight selected day
(otherMonth ? ' ui-priority-secondary' : '') + // distinguish dates from other months
'" '+_tempCss+'href="#">' + printDate.getDate() + '</a>')) + '</td>'; // display selectable date
// add by sw 2013-12-11

最后引入css文件：

/* add by sw 2013-12-11 */
.festival_input{
background:url("images/un_festivals.png") no-repeat right 0;
text-indent:-999px;
float:left;
width:80%;
height:14px;
overflow:hidden;
line-height:100px;

}
.festival_input:hover{line-height:15px;}

.festival_default{
line-height:15px;
}
另外引一張圖片。

就可以了。
相關顯示效果：
[img]http://dl2.iteye.com/upload/attachment/0092/0616/0920f17f-0b99-3273-964b-358aa3ea33c7.jpg[/img]

原理：在初始化日歷控件的時候，加載日期每一個td 標簽。根據法定節假日數組，顯示特定的CSS樣式。 中文節假日名稱是圖片背景來的。

總結

以上是生活随笔為你收集整理的jQuery UI 添加法定节假日显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。