<Javascript display property

Question

In my form I have a textbox and a calendr along with other controls

<asp:TextBox ID="TextBox2" runat="server"   onfocus="CalOpen()" asp:TextBox>

<asp:Calendar ID="Calendar1" runat="server" style="display:none;" 
        onselectionchanged="Calendar1_SelectionChanged"></asp:Calendar>


<script type="text/javascript">

        function CalOpen()
        {
         var cal = document.getElementById('<%=Calendar1.ClientID%>');
         cal.style.display='block';

        }
</script>

protected void Calendar1_SelectionChanged(object sender, EventArgs e)

{
    TextBox2.Text = Calendar1.SelectedDate.ToLongDateString();
    Calendar1.Visible = false;
}


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

For the first time it worked fine, but, 2nd time when I click TextBox2, that is, after selecting date for the first time. Browser is throwing error"object required"

I am unable to know where I went wrong.

Plz help me in making my code correct.

Thank You.

Answer 1

When you write Calendar1.Visible = false; in server-side code, it doesn't render the calendar at all. Therefore, there is no calendar element for the Javascript to show.

Instead, you should make a CSS class that applies display: none to the calendar, and set the CssClass property to that class on the server.

For example:

<style type="text/css">
    .Hidden {
        display: none;
    }
</style>

<asp:Calendar ID="Calendar1" runat="server" CssClass="Hidden"
    onselectionchanged="Calendar1_SelectionChanged"></asp:Calendar>

protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
    TextBox2.Text = Calendar1.SelectedDate.ToLongDateString();
    Calendar1.CssClass = "Hidden";
}


protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
{
    Calendar1.CssClass = "";
}