JQuery DatePicker之 工作日维护

   这两天研究JQuery DatePicker，弄的头很疼，不过学习成果也不错。
把自己认为重点的列出来以备以后学习，JQuery UI 版本jquery-ui-1.8.13.custom
现在想做一个工作日维护的功能，界面很简单。打开界面，显示一年的日期，默认六日为休息日显示为红色，其他日期黑色表示工作日，用户点击日期进行工作日和非工作日的转换。
    功能简单吧，选来选取插件用什么呢，最终选择可JQuery的DatePicker，优点不用说了。说说利用DatePicker解决这件事情的思路吧。
    首先布局问题，如何在一个页面中显示12个月呢？解决方法，这个很简单DatePicker有个numberOfMonths属性，填写了numberOfMonths:[3,4]（三行四列），用DIV填装DatePicker，界面的布局问题解决了。
    第二个就是如何让DatePicker自动选择整个年而不是隔年的显示。例如，现在3月份，按照第一步写的结果会出现今年3月份至明年2月份12个月。这样不符合初衷，我的解决方案是利用minDate和maxDate进行约束，不知这样是不是走弯路了。
    第三个就是样式问题，这个问题折磨了我很久。开始想仅仅更改DatePicker的样式解决，可是本人不才CSS那套东西会用，改起来就费劲了，所以想换个方式。一直以来用DatePicker，只知其然不知其所以然，所以果断看源代码。最后终于找到如何更改来实现我的需求。在jquery-ui-1.8.13.custom
9613行
for (var row = 0; row < numMonths[0]; row++) {
     var group = '';
     ...............
9651行
for (var dRow = 0; dRow < numRows; dRow++) { // create date picker rows
    calender += '<tr>';
    ................
9655行
for (var dow = 0; dow < 7; dow++) { // create date picker days
用这3个循环来生成对应的日历，在最后一个for循环中有生成table中根节点 td a的方式，完全是字符串拼接啊，看到这里想必大家都知道，按照自己的需求改就行了。
这样就得到了一个干净的以年为单位的日历。
    最后一个问题，如何让页面在加载过程中将已经选中的工作日变成红色呢。看看beforeShowDay这个方法吧，DatePicker在每次点击和初始加载过程中都会把日历remove然后在重新显示，看看源代码这句话“ inst.dpDiv.empty().append(this._generateHTML(inst));”而且在每次重新绘制日历时都会执行beforeShowDay方法，所以解决方法就是在beforeShowDay写上给页面改变CSS的代码。
    一切搞定，如有不足之处请帮忙补充。

评论

1 楼 caoxho 2012-07-10  

你好，最近项目有这样个需求，能参考下吗？
谢谢！
邮箱：[e-mail]