[習題]日曆(Calendar)控制項的障眼法（.Visible屬性），使用時才出現？不用就消失？

 

 

昨天上課時，學員發問的問題

作法非常簡單。

 

還是透過 .Visible屬性（現形？隱形），簡單的說，就是障眼法！

 

執行成果如下：

首先，您看不見日曆控制項。

      

 

必須按下「日曆小圖示」，才會出現日曆控制項喔！

然後可以點選日曆，代替自己輸入日期。

      

日期會自動帶入TextBox裡面（這個作法，書本上有了）

 

 

 

這個範例完全沒有技巧，只要拼拼湊湊就能完成

 

昨天上課，沒有教日曆控制項，

    直接靠「經驗」，自己把玩就能做出很多功能。

    這種「自我學習」的方式，面對新技術才會輕鬆......

 

想知道這些學員「上課第一天」就瞬間提升功力的秘訣嗎？......來上課吧！！

 

ASP.NET控制項，讓您「做得更多，寫得更少」

 

您也可以利用 jQuery UI做到類似的功能，請看：http://jqueryui.com/datepicker/

（名為 DatePicker）

 

這裡可以找到很多可愛的日曆小圖示，請看：http://www.iconpng.com/tag/%E5%8F%B0%E5%8E%86

 

 

 

HTML畫面設計：

        請輸入日期：<asp:TextBox ID="TextBox1" runat="server" ReadOnly="True"></asp:TextBox>

 

        <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="您找到的小圖片"

                OnClick="ImageButton1_Click"  />

        <br />

        <br />

 

        <asp:Calendar ID="Calendar1" runat="server" Visible="False"

                 OnSelectionChanged="Calendar1_SelectionChanged"></asp:Calendar>

        （請事先設定Calendar的 .Visible = false，隱形）<br />

        <br />

 

後置程式碼如下：

    （VB只要在程式後面，不加 "分號(;)"即可）

    protected void ImageButton1_Click(object sender, ImageClickEventArgs e)

    {

        Calendar1.Visible = true;    //看得見！現形！

    }

 

    protected void Calendar1_SelectionChanged(object sender, EventArgs e)

    {

        TextBox1.Text = Calendar1.SelectedDate.ToShortDateString();

 

        Calendar1.Visible = false;    //選完日期後，看不見！隱形！

    }