雖然HTML發展到現在已經好幾代了,但是對於日期輸入還是沒有什麼好方法,很多網站都是採用下拉輸入盒來表現,表面上看起來似乎很不錯,不會有輸入錯誤的狀況發生,但是卻讓使用者必須眼鏡盯緊下拉盒看,實在不是什麼值得推薦的方法。
以前我曾經包裝javascript、文字輸入盒、圖形按鈕變成一個Asp.Net Server Control,確實可以節省很多的開發時間,其實還有很多類似的在頁面上經常使用的動作或元件,需要進行進一步的包裝,當數量多起來真的是蠻痛苦的。
現在使用jQuery開發的開源插件相當多,會使用這些插件可以完全省掉這些元件包裝的動作,要花的時間就是只有找到一個合適好用的插件而已。

使用ASP設計一個畫面如上圖,其中日期欄位只要有一個文字盒就可以了,部份程式碼如下:
<tr><th>入帳日期</th><td><asp:TextBox ID="tbSellDate" runat="server" Columns="10"></asp:TextBox></td></tr>
接著就是要使用jQuery.UI這個功能強大的插件,你可以直接到網站上面下載原始碼下來,是完全免費的。
<script src="jquery/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="jquery/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script>
<script src="jquery/ui/i18n/jquery.ui.datepicker-zh-TW.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="CSS/jquery-ui-1.8.5.custom.css">
在<head></head>加上上面的引入,並且準備好下拉的圖片檔,接著加上以下的javascript程式碼,
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('#ctl00_ContentPlaceHolder1_tbSellDate').datepicker({dateFormat:'yy/mm/dd',
showOn:'both',buttonImageOnly:true,buttonImage:'images/datepicker.gif'});
});
//]]></script>
問題是ASP.NET的ClientID是會變動的,它會隨著控制項的套疊增加ClientID的長度,使得ClientID在頁面上保證它是唯一的。所以只有在程式碼上面將上面的程式碼輸出出去,才能知道到底頁面上的控制項是什麼ID。
StringBuilder regscript = new StringBuilder();
regscript.Append("<script type='text/javascript'>\n"); regscript.Append("//<![CDATA[\n"); regscript.Append("$(document).ready(function() {\n"); regscript.AppendFormat(
" $('#{0}').datepicker({{dateFormat:'yy/mm/dd',showOn:'both',buttonImageOnly:true,buttonImage:'{1}'}});\n", tbSellDate.ClientID, "images/datepicker.gif"); regscript.Append("});\n"); regscript.Append("//]]>"); regscript.Append("</script>\n");
Page.ClientScript.RegisterStartupScript(this.GetType(),
string.Format("{0}regist", this.ID), regscript.ToString());
在Page_Load的地方使用上面的程式碼,將ClientID配合程式碼傳送到頁面上,這樣就能正常工作了。因為jQuery的插件幾乎都是要加在$(document).ready()之內,所以可以將這樣的程式碼包裝一下,變成一些呼叫函數就可以重複利用了。
能看懂到這裡相信不用我再列出包裝的程式碼吧,事實上我已經開始轉移到PHP+MySQL開發了,所以也根本沒有寫出重複利用的函數庫。至於為什麼我要轉移開發平臺呢,等我學成了再說吧。說不定會再寫個無痛學習的系列文章吧。



會比較方便