[個人筆記] ASP.NET搭配JavaScript做日期開窗

[個人筆記] 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