Asp.net Calender control on Textbox Click

Below is the sample to display a calender control on asp.net click event of Textbox..

On .aspx page write  the below code: then

<asp:TextBox ID="txtDate" runat="server" onclick="popupCalendar()"/>
   <div id="dateField" style="display: none;">
  <asp:Calendar ID="calDate" OnSelectionChanged="calDate_SelectionChanged" 

runat="server" OnVisibleMonthChanged="calDate_OnVisibleMonthChanged" />
    </div>

Then write the below javascript: 

<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>
Then on the code behind file write the below code:


protected void calDate_SelectionChanged(object sender, EventArgs e)
        {
            txtDate.Text = calDate.SelectedDate.ToString("d");
        }
 
 protected void calDate_OnVisibleMonthChanged(object sender, MonthChangedEventArgs 
                                                                       e)
    {
        ClientScript.RegisterStartupScript(calDate.GetType(), 
                       "myScript", "popupCalendar()", true);
    } 

Its done, Below is the calender view: