使用 CalendarExtender 讓 TextBox 顯示民國格式日期

2008-03-18

(1) 可以設定 CalendarExtender 的屬性 EnableScriptGlobalization="True" , EnableScriptLocalization="True" 這樣可以讓日曆變成是中文的，但是跳出來的日曆畫面還是會以 "月", "西元" 等字眼出現，並非"民國"。

(2)目前我還沒有找到可以直接讓跳出來的日曆，直接顯示民國格式。但是，可以利用一些小技巧來讓日曆被挑選後，TextBox1 顯示出來的是以民國為主的格式。例如: popup 日曆，挑選 2007/09/24，但是 TextBox1 顯示 96/09/24。

其實，就是處理 CalendarExtender 的 OnClientDateSelectionChanged 事件，該事件會在使用者選取日期後執行，在該事件撰寫 javascipt 就可以達到我們要的結果。

CalendarExtender 設定:

<asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="true" EnableScriptLocalization="true" >
</asp:ScriptManager>
<asp:TextBox ID="rday" runat="server" > </asp:TextBox>
<asp:Image ID="Image1" runat="server" ImageUrl="images/Calendar.png" />
<cc1:CalendarExtender ID="CalendarExtender1" runat="server" Format="yyyy/MM/dd" OnClientDateSelectionChanged="toLocalDate" PopupButtonID="Image1" TargetControlID="rday" >
</cc1:CalendarExtender>

JaaScript:

<script type="text/javascript">
function toLocalDate( ) {
var year = parseInt( document.getElementById ( "TextBox1" ).value.substr ( 0,4 ) ) - 1911;
document.getElementById ( "TextBox1" ).value = year + document.getElementById ( "TextBox1" ).value.substr ( 4, 6 );
}
</script>

Demo 影片: