<< GridView 欄位 CheckBox 全選及取消全選 | Home | FormView 及 GridView 中的彈出式日期選擇視窗 >>

程式碼下載 PopupCalendar.zip

這個範例示範了在 TextBox 控制項 click 後，彈出一個日期選擇視窗，當選取日期後按確定，就將選取的日期帶回 TextBox 中。
在這個程式中有二個頁面，Default.aspx 頁面放置一個 TextBox，Calendar.aspx 頁面即會日期選擇視窗。

Defulat.aspx 頁面的程式碼如下
Default.aspx

    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></div>
    </form>

 Default.aspx.vb

01 Partial Class _Default
02     Inherits System.Web.UI.Page
03
04     Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
05         Dim sScript As String
06         Dim sUrl As String
07
08         '日期輸入的頁面，將 TextBox 以 TextBoxId 網址參數傳給日期頁面
09         sUrl = "Calendar.aspx?TextBoxId=" & TextBox1.ClientID
10         sScript = "window.open('" & sUrl & "','','height=315,width=350,status=no,toolbar=no,menubar=no,location=no','')"
11         TextBox1.Attributes("onclick") = sScript
12     End Sub
13 End Class

 

Calendar.aspx 頁面的程式碼如下

Calendar.aspx

    <form id="form1" runat="server">
    <div>
        <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
        <asp:Button ID="btnOK" runat="server" Text="確定" />
    </div>
    </form>

 

 

Calendar.aspx.vb

01 Partial Class Calendar
02     Inherits System.Web.UI.Page
03
04     Protected Sub btnOK_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnOK.Click
05         Dim sScript As String
06         Dim sTextBoxID As String
07
08         '取得要輸入日期的 TextBox
09         sTextBoxID = Me.Request.QueryString("TextBoxId")
10         '將日期設給 TextBox，並將視窗關閉
11         sScript = "opener.window.document.getElementById('" & sTextBoxID & "').value='" & Calendar1.SelectedDate.Date & "';"
12         sScript = sScript & "window.close();"
13         Me.ClientScript.RegisterStartupScript(Me.GetType(), "_Calendar", sScript, True)
14     End Sub
15 End Class

ASP.NET 魔法學院


2008/3/17 00:34| 閱讀數 : 6018 | 我要推薦 | One Comment | 文章分類: ASP.NET 基礎 JavaScript 常見問題 訂閱

DotBlogs Tags: javascript

Feedback

  • sdfg 2008/6/20 上午 10:11 回覆

    # re: 彈出式日期選擇視窗

標題 *
名稱 *
Email (將不會被顯示)
Url
回應
登入後使用進階評論
Please add 4 and 7 and type the answer here: