日期控制項實作教學(1) - 結合 JavaScript

日期控制項實作教學(1) - 結合 JavaScript

在上一篇文章中提到了純 JavaScript 的 The Coolest DHTML Calendar 日期選擇器,雖然它的使用方式已經很相當便利,可是需要在有日期選擇器的頁面做重覆的動作對程式開發人員來說是一件相當無趣的事。

本文就是要實作將這個 The Coolest DHTML Calendar 日期選擇器封包成日期選擇的伺服器控制項,讓開發人員可以直接拖曳這個控制項在頁面上即可使用。

首先看一下 The Coolest DHTML Calendar 它的使用方式,它需要在 Head 區段加入加下的定義,包含一個 css 樣式表檔案及三個 JavaScript 檔案。

然後在需要彈出日期選擇的控制項上加入下列初始化動作即可使用。

有了以上的資訊,就可以著手進行日期控制項的實作了。

首先新增一個「Web 控制項程式庫」,然後加入一個「Web 自訂控制項」命名為 TBDateEdit 類別。TBDateEdit 的作法如下

1.繼承 System.Web.UI.WebControls.CompositeControl 類別,製作複合式控制項。
2.覆寫 OnLoad 方法,輸出 Head 所需的 css 及 JavaScript 參考檔案。
3.覆寫 CreateChildControls 方法,建立一個 TextBox 及 HtmlButton。
4.覆寫 Render 方法,輸出日期控制項的 JavaScript。
5.新增 Text 屬性,輸入文字內容。

在控制項的程式碼中,預設 JavaScript 的路徑為 Web 應用程式下的 "ClientScript/jscalendar" 子資料夾;所以 Web 專案需要將 The Coolest DHTML Calendar 相關的 JavaScript 複製至該資料夾。

完成以上動作後,就建置這個控制項程式庫。再來加入一個新網站來測試這個控制項,首先要記得將 The Coolest DHTML Calendar 相關的 JavaScript 複製至 ClientScript/jscalendar 資料夾。

然後工具列中將日期控制項拖曳至頁面上,在頁面上配置二個日期控制項及一個按鈕。會放置二個日期控制項,是要測試在多個日期控制項時,輸出的 css 及 JavaScript 參考是否會重覆,及輸出的 JavaScript 是否正確。而按鈕是要測試 PostBack 後,TextBox 中的值是否會被保存。

執行結果如下

這個控制項實作只是初步教學,這個日期控制項還需要做一些擴充,例如加入語系設定、樣式設定、日期格式等屬性,才是一個完整的日期控制項。

程式碼下載:TBDateEditDemo.zip
 

ASP.NET 魔法學院