昨天在經理安排下，提出一個需求，顯示出日歷，并在日歷上顯示特殊日期，當鼠標移動至此日期時，彈出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('οnclick="day_Click(' + K.y + "," + K.M + "," + K.d + ');" ');G.a("οnmοuseοver=\"this.className='" + E + "'\" ");G.a("οnmοuseοut=\"this.className='" + H + "'\" ");} else {H = "WinvalidDay";}G.a("class=" + H);G.a(">" + K.d + "</td>");} else {G.a("></td>");}

我們可以清楚的看到，在定義每一列<td>的事件時，是在這里生成的，廢話不多說，發現這一特點后我們來做個實驗，在H="WspecialDay"下添加代碼

G.a("οnmοuseοver=\"alert(1);\"");

?保存后回到主頁，手動移到特殊日期后，就能夠彈出1的提示框內容。

?功能很簡單，重要的是一個思路，接下來我們要對這個方法進行封裝，以接口的形式對外，使開發人員自定義特殊日期的鼠標移動事件，代碼如下：

WdatePicker.js 對外提供接口

?calendar.js 實現接口

重新定義

G.a("οnmοuseοver=\"_mouseOvers(this)\"");

?

這樣我們就可以自定義特殊日期的鼠標移動事件了。實現方式和my97調用其他方法的形式一樣。

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

本篇內容實質是比較簡單的，有js基礎的朋友相信都能看懂，重點并不是功能，而是實現的思路，我們在編程時要勇于發現與思索，徹底透析每一項，每一點，這樣是代碼最高的藝術，好了最后我把我做的一個擴展功能給大家看下

以上都是鼠標移到特殊日期后顯示當天的特殊內容，這里非常感謝群里的水墨軒大牛的指導，讓小弟我又學習到了很多知識，另外小小的做個廣告，歡迎加群261882616這里歡迎，高手新手，大牛，小菜們的加入

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

轉載于:https://www.cnblogs.com/doNetTom/archive/2013/05/02/3022108.html

總結

以上是生活随笔為你收集整理的my97DatePicker 自定义扩展方法（实现备忘录）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。