Showing Calendar Using JavaScript Function

Question

I want to make a calendar that display itself on clicking to the calendar image, and whenever a date is selected, it is shown in the textbox. I have done this part but the problem is whenever I change the month of the calendar, the page refreshes itself and the calendar display becomes none again while on clicking the calendar image again, the calendar displays the next month. I want to change the month of the calendar without making the page refresh.

I am making it in Visual Studio. I search for the query on the site but almost all answers uses PHP(which I don't understand).

Code:

<asp:TextBox ID="txtCal" runat="server"></asp:TextBox> <img alt="" src="CalendarImage.jpg" width="20px" height="20px" onclick="show()" /> </br>
<div id="cal">
<asp:Calendar ID="Calendar1" runat="server" onselectionchanged="Calendar1_SelectionChanged"></asp:Calendar>
</div>

OnChangingSelectedDate

protected void Calendar1_SelectionChanged(object sender, EventArgs e)
    {
        txtCal.Text = Calendar1.SelectedDate.ToString("dd/MM/yyyy");
    }

StyleSheet:

#cal
        {
            display: none; 
        }

JavaScript Function:

function show() {
    document.getElementById("cal").style.display = "block";
}

Answer 1

use this java script

<script type="text/javascript">  
   function popupCalendar()
    {
      var dateField = document.getElementById('dateField'); // toggle the div 
      if (dateField.style.display == 'none') 
        dateField.style.display = 'block'; 
      else dateField.style.display = 'none';          

     } 
 </script>

and a textbox:

      <asp:TextBox id="txtDate" Runat="server" /> <img src="cal.png"    onclick="popupCalendar()" />

and a calendar in div tag:

    <div id="dateField" style="display:none;">  
<asp:Calendar id="calDate" OnSelectionChanged="calDate_SelectionChanged"  
        Runat="server" SelectionMode="Day" 
        onvisiblemonthchanged="calDate_VisibleMonthChanged" /> </div>

and in the code behind:

     protected void calDate_SelectionChanged(object sender, EventArgs e)
{
    txtDate.Text = calDate.SelectedDate.ToString("d");
}
 protected void calDate_VisibleMonthChanged(object sender, MonthChangedEventArgs e)
{
  ClientScript.RegisterStartupScript(this.GetType(), "myScript", "<script language=JavaScript>popupCalendar();</script>");
}