ASP Calendar picker disappearing when changing date

<asp:Content ID="Content1" runat="server" contentplaceholderid="ContentPlaceHolder1" EnableViewState="True">
    <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>

<h2 style="text-align: center">ADD STAFF</h2><br />
    <div class="container">
    <fieldset> <legend>Personal Details</legend>

    <asp:Panel ID="Panel1" runat="server">
        <table border="0" id="table2">


            <tr>
                <td class="td1">Date Of Birth </td>
                <td class="td2"><asp:TextBox ID="CalTxt" runat="server" AutoPostBack="True" MaxLength="20" /><img src="Images/date.ico" onclick="popupCalendar()" style="height: 30px" />  </td>


            </tr>

        </table>

    </asp:Panel>
        </fieldset>
        </div>



    <div id="dateField" style="display:none;">

        <asp:Calendar ID="Calendar1" runat="server" OnSelectionChanged="SelectionChanged_Date"></asp:Calendar>
</div>


</asp:Content>

protected void Page_Load(object sender, EventArgs e)
        {

        }
        protected void SelectionChanged_Date(object sender, EventArgs e)
        {
            string date = Calendar1.SelectedDate.ToString("dd/MM/yyyy");

            CalTxt.Text = date.ToString();

        }