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的代码。
    一切搞定,如有不足之处请帮忙补充。

你可能感兴趣的:(jquery,css,工作日,datepicker 源代码)