jQuery UI 添加法定节假日显示

[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 添加法定节假日显示相关推荐

【文末有惊喜!】iOS日历攻略：提醒调休并过滤法定节假日
本文字数:4281字预计阅读时间:29分钟背景笔者五一之前补班的时候,闹钟没响,早上差点迟到了.笔者闹钟设置的是周一到周五,因为iPhone没有法定节假日和补休的设置....笔者就想要解决这个痛 ...
获取当年的法定节假日和周末_通过可配置的周末和节假日添加工作日
获取当年的法定节假日和周末介绍我已经找到了一个如何计算两个日期之间的工作日数的示例,但是我还没有找到一种发布方法来添加工作日. Excel最近添加了此功能,但Microsoft尚未将其提供给Acc ...
ajax动态选项卡,如何将动态生成的ajax内容附加到jquery ui选项卡中新添加的选项卡？...
我在侧面板上有以下表格的表格: one two three four 当有人点击该列的某一行时,该行的标题将作为参数传递给在主面板中显示搜索结果的函数. $("#content-displa ...
css拖拽调整高度,两种为wangEditor添加拖拽调整高度的方式：CSS3和jQuery UI
wangEditor是一款优秀的Web富文本编辑器,但如果能像KindEditor那样支持拖拽调整高度就更好了.有两种方式可以为wangEditor添加这一功能,这里使用的wangEditor版本为2 ...
rails2.3.5 添加jquery ui 找不到images
为什么80%的码农都做不了架构师?>>> 要维护老版本的rails,添加jquery ui 的时候,images放在sytlesheets下是找不到的,所以把文件放到publi ...
html 输入框自动缩短一行内显示,JQuery UI组合框自动补全功能改进版（即时全部显示+input内容保存）...
JQuery UI Autocomplete(自动补全)功能在input前端设计中非常有用,最近一个项目正好用到,仔细研究了下组合框(combobox)的自动补全部分,官方地址是:https://jq ...
jQuery UI dialog实现dialog弹框显示
实现弹框,比较精美的jQuery.ui.*:来实现,弹框显示: jsp页面代码[jqueryuidialog.jsp]: <%@ page language="java" i ...
Asp.net mvc 添加Jquery UI
1.使用NuGet下载jquery ui Install-Package jQuery.UI.Combined 2.下载多语言文件: development-bundle/i18n目录下是jquery ...
Wijmo 更优美的jQuery UI部件集：通过jsFiddle测试Wijmo Gauges
Wijmo 的巨大优势之一就是,它们是非常流行的jQuery UI部件.这将意味着它们的基础类库具有很多支持者.具有众多的支持者同时也意味着更多好用的工具.这些好用的工具之一就是很酷的jsFiddle ...

jQuery UI 添加法定节假日显示

jQuery UI 添加法定节假日显示相关推荐

最新文章

热门文章