[個人筆記] ASP.NET搭配JavaScript做日期開窗
一共會有三個頁面:主頁面、開窗1、開窗2
主頁頁面JavaScript:
1: <script type="text/javascript">
2: function choiceDate(id) {
3: var returnValue = window.showModalDialog("開窗1", id);
4: document.getElementById(id).value = returnValue;
5: document.getElementById(id).blur();
6: }
7: </script>
主頁Behind Code:
1: protected void Page_Load(object sender, EventArgs e)
2: {
3: BtnDate.Attributes.Add("onclick", @"choiceDate('txtDate');");
4: txtDate.Attributes.Add("onclick", @"choiceDate('txtDate');");
5: }
主頁的作法就是在頁面讀取時註冊onclick事件觸發JavaScript來開啟"開窗1"頁面,id傳入帶回值顯示的TextBox控件(txtDate),並且於JavaScript使之blur()以消除控件Focus狀態,因為TextBox設定ReadOnly會無法帶回值,所以在TextBox被點選時也觸發開窗事件,並於帶回值後消除Focus狀態。
開窗1頁面JavaScript:
1: <script id="clientEventHandlersJS" language="javascript">
2: function IFRAME_onblur() { }
3: </script>
開窗1頁面Html:
1: <iframe frameborder="no" src=開窗2' style="width: 480px; height: 450px"
2: id="IFRAME" language="javascript" onblur="return IFRAME_onblur()"></iframe>
開窗1的用途在於作為開窗2的容器,可以避免其被點選日期時觸發開窗。
開窗2Behind Code:
1: protected void Calendar_SelectionChanged(object sender, EventArgs e)
2: {
3: Response.Write("<script language=javascript>window.returnValue='" + CalendarControl.SelectedDate.ToLongDateString() + "';window.close();</script>");
4: }
在日曆點選日期的時候就會觸發傳值回主頁,並且關閉頁面。
參考網站:http://www.haoxiai.net/wangzhanzhizuo/aspnet/53755.html