TIPS-NetAdvantage WebDateChooser日期格式設定
最近在Survey Infragistics的NetAdvantage ASP.NET控件組,首先吸引我注意首推WebDateEdit與WebDateChooser:
WebDateEdit可以全手工輸入,也可以利用按上下左右鍵調整年、月、日或完全以滑鼠點選操作。官網的Live Demo
WebDateChooser則有漂亮的DHTML小月曆可以選日期,也支援直接手工輸入,但上下鍵只能用來調前一天後一天,手工輸入年、月後會自動補"-"。Live Demo
WebDateChooser可以選取預先設好的主題格式組合,小日曆就會長得一副Office 2003或是Windows XP的樣子。不過測試的結果有點小插曲:
在測試環境下執行,某些預設主題(例如: Office 2003)會跑出七顆"星"來(上圖左),完全看不出星期幾,但某些主題就不會有這種問題(上圖右)。查了一下,有個 DayNameFormat參數是關鍵:
<igsch:WebDateChooser ID="WebDateChooser1" runat="server" Value="2007-11-26">
<CalendarLayout CellPadding="5" DayNameFormat="FirstLetter"
不過它比照.NET的DayNameFormat只有FirstLetter, FirstTwoLetter, Full, Short, Shortest幾種選擇,在此只要設定成Full,就可以看到完整的"星期X"。不過依我個人觀點,星期X用三個字實在太冗長,也破壞了原本精巧的外觀,還不如回歸用英文字表示, 但是要怎麼將中文顯示換成英文呢?
找了半天,連DateFormat之類設定日期格式的屬性都沒找到,後來才發現原來WebDateChooser的日期格式由WebDateChooser.CalendarLayout.Culture決定,難怪在中文版Windows環境中就自動跑出中文來。搞清楚這點,就可依下列方式指定格式:
System.Globalization.CultureInfo info =
CultureInfo.CreateSpecificCulture("en-USzh-TW");info.DateTimeFormat.ShortDatePattern = "yyyy-MM-dd";
WebDateChooser1.CalendarLayout.Culture = info;
PS: 圖中兩個小日曆同時拉開也要點小技巧,NetAdavantage ASP.NET控件的Client Side支援做得還不錯,所以在body onload事件用以下的寫法就搞定囉!
<script type="text/javascript">
function pageOnLoad() { var wdc1 = igdrp_getComboById("WebDateChooser1"); var wdc2 = igdrp_getComboById("WebDateChooser2"); wdc1.setDropDownVisible(true);
wdc2.setDropDownVisible(true);
}
</script>