my97DatePicker 自定義擴展方法（實現備忘錄）

昨天在經理安排下，提出一個需求，顯示出日歷，並在日歷上顯示特殊日期，當鼠標移動至此日期時，彈出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這里歡迎，高手新手，大牛，小菜們的加入

大家共同學習共同進步，共同享受編程的快樂。