jQuery UI 添加法定节假日显示 博客分类: javascript JavaScript jQueryUI 法定节假日日历控件
程序员文章站
2024-03-17 14:04:34
...
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 ? ' ' : // 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样式。 中文节假日名称是图片背景来的。