What do I need to do to show the calendar when button is clicked?

I am trying to do a calendar which pops out when a button (...)is clicked, but I am stuck and don't know what I have to do. Below is the code I am using. I am using visual studio 2010 and C# as my programming langauge.

<asp:textbox id="TextBox1" runat="server"></asp:textbox>
<input type="button" id="Button2" runat="server" value="...."><br>
<asp:Panel id="pnlCalendar" runat="server" 
     style="POSITION: absolute">
 <asp:calendar id="Calendar3" runat="server" CellPadding="4" 
      BorderColor="#999999" Font-Names="Verdana" Font-Size="8pt" 
      Height="180px" ForeColor="Black" DayNameFormat="FirstLetter" 
      Width="200px" BackColor="White">
  <TodayDayStyle ForeColor="Black" BackColor="#CCCCCC"></TodayDayStyle>
  <SelectorStyle BackColor="#CCCCCC"></SelectorStyle>
  <NextPrevStyle VerticalAlign="Bottom"></NextPrevStyle>
  <DayHeaderStyle Font-Size="7pt" Font-Bold="True" BackColor="#CCCCCC">
  </DayHeaderStyle>
  <SelectedDayStyle Font-Bold="True" ForeColor="White" BackColor="#666666">
  </SelectedDayStyle>
  <TitleStyle Font-Bold="True" BorderColor="Black" BackColor="#999999">
  </TitleStyle>
  <WeekendDayStyle BackColor="LightSteelBlue"></WeekendDayStyle>
  <OtherMonthDayStyle ForeColor="#808080"&g开发者_JAVA技巧t;</OtherMonthDayStyle>
 </asp:calendar>
</asp:Panel>

ASP.NET Calendar is quite difficult to use in that way. Easier way is to use AJAX Calendar or JQuery DatePicker.

You can consider using jQuery UI Date picker ... Flexible, client side and takes two minutes to setup using NuGet

Install NuGet to your VS and type Install-Package jQuery.UI.Combined

include needed javascript libraries, follow the sample and you're good to go ;)

If you really want to do it on server side then this is what you can do.

bool showCalendar = false;
protected void Page_Load(object sender, EventArgs e)
{
    if (showCalendar)
        Calendar1.Visible = true;
    else
        Calendar1.Visible = false;
}

protected void Button1_Click(object sender, EventArgs e)
{
    Calendar1.Visible = true;
}

Basically setting Calendar.Visible to false and when user click on button set it to true but once it is set to true.. it is not really pop up but control is being added using postback

You can do it when someone clicks on the text field itself.

        <asp:Label ID="lblDate"  runat="server" Text="Date :"></asp:Label>
        <asp:TextBox ID="txtDate" runat="server" ></asp:TextBox> YYYY-MM-DD
        <asp:CalendarExtender ID="CalendarExtender1" TargetControlID="txtDate" runat="server" Format="yyyy-MM-dd">
        </asp:CalendarExtender>