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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值