jQuery UI 添加法定节假日显示

jQuery UI 添加法定节假日显示

    有新需求了，填写日历的时候需要显示法定节假日。在网上了解了一下，没有类似控件。尤其在涉及到农历时，没有计算方法，只能固定显示。强大的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 ? '&#xa0;' : // 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;
}

另外引一张图片。

就可以了。
相关显示效果：

原理：在初始化日历控件的时候，加载日期每一个td 标签。根据法定节假日数组，显示特定的CSS样式。中文节假日名称是图片背景来的。

jQuery UI 添加法定节假日显示

猜你喜欢