my97DatePicker 自定义扩展方法（实现备忘录） hellohello

昨天在经理安排下，提出一个需求，显示出日历，并在日历上显示特殊日期，当鼠标移动至此日期时，弹出div，显示当天具体的操作信息。在网上与园子里查找一段时间，并没有准确的demo，所以无奈只有自己研究，二次开发DatePicke。

先来看下DatePicke提供的API这些我不想说了，不知道的直接上官网，或者百度、google查找。

官网给出的API中要实现备忘录效果，我们要用到三个地方

1.平面显示。

2.特殊天和特殊日期。

3.日历放大：这里说下控制calendar的大小的属性，目录：DatePicker->skin->default->datepicker.css->.WdateDiv,我们可以更改宽度，高度属于日历自适应的，如果强制改变的话，会早成页面扭曲变形的原因，所以设置基本宽度即可。

有了上面三个准备后，接下来就是重要的一步，编写自定义扩展事件，这里我也只是举例，大家可以根据例子写出自己想要的结果。

首先打开WdatePicker.js，calendar.js，这里介绍下这俩个核心库。

WdatePicker：配置文件，定义接口的地方。

calendar：主函数库，在WdatePicker中定义的方法在这里实现。

进入主题：添加自定义函数

首先我们要把两个js文件进行解压，方便查看推荐一个不错的网址：js优化工具

在WdatePicker中定义新增方法的入口，specialDateMouseOver

specialDateMouseOver:null,

现在查看firefox中某一特殊日期html

<td class="Wwday" align="center" onmouseout="this.className='Wwday'" onmouseover="this.className='WwdayOn'" onclick="day_Click(2013,4,14);">14</td>
<td class="WspecialDay" align="center" onmouseout="this.className='WspecialDay'" onmouseover="this.className='WdayOn'" onclick="day_Click(2013,4,15);">15</td>

这里可以看出在特殊日期与普通日期下，都是定义了统一的事件处理方法，当然这时候我们要对特殊日期的onmouseover事件进行重写，我们去源代码中查看定义此方法的位置，搜索关键字"WspecialDay"，很快就能在js中找到此属性的位置

                G.a("<td align=center ");
                if (J) {
                    if (this.checkValid(K, "d", $)) {
                        if (this.testSpeDay(new Date(K.y, K.M - 1, K.d).getDay()) || this.testSpeDate(K)) {
                            H = "WspecialDay";
                        }
                        G.a('onclick="day_Click(' + K.y + "," + K.M + "," + K.d + ');" ');
                        G.a("onmouseover=\"this.className='" + E + "'\" ");
                        G.a("onmouseout=\"this.className='" + H + "'\" ");
                    } else {
                        H = "WinvalidDay";
                    }
                    G.a("class=" + H);
                    G.a(">" + K.d + "</td>");
                } else {
                    G.a("></td>");
                }

我们可以清楚的看到，在定义每一列<td>的事件时，是在这里生成的，废话不多说，发现这一特点后我们来做个实验，在H="WspecialDay"下添加代码

 G.a("onmouseover=\"alert(1);\"");

 保存后回到主页，手动移到特殊日期后，就能够弹出1的提示框内容。

 功能很简单，重要的是一个思路，接下来我们要对这个方法进行封装，以接口的形式对外，使开发人员自定义特殊日期的鼠标移动事件，代码如下：

WdatePicker.js 对外提供接口

 calendar.js 实现接口

重新定义

G.a("onmouseover=\"_mouseOvers(this)\"");

这样我们就可以自定义特殊日期的鼠标移动事件了。实现方式和my97调用其他方法的形式一样。

 WdatePicker({ specialDates: ['2013-04-15', '2013-04-19'], eCont: 'div1', _SpecialOnmouseover: function (event) { alert('111'); } })

本篇内容实质是比较简单的，有js基础的朋友相信都能看懂，重点并不是功能，而是实现的思路，我们在编程时要勇于发现与思索，彻底透析每一项，每一点，这样是代码最高的艺术，好了最后我把我做的一个扩展功能给大家看下

以上都是鼠标移到特殊日期后显示当天的特殊内容，这里非常感谢群里的水墨轩大牛的指导，让小弟我又学习到了很多知识，另外小小的做个广告，欢迎加群261882616这里欢迎，高手新手，大牛，小菜们的加入

大家共同学习共同进步，共同享受编程的快乐。