Obout Calendar in UpdatePanel messes up after asynchronous postback

Question

I am currently trying to implement a date range search function using Obout Calendar controls. The idea is that the user can select a date from the Obout calendar which will then fill a asp:TextBox beside it. There are other fields in the form, but this is the one that's breaking. I also have a asp:Button at the bottom of the form who's function is to clear all fields in the form. It does this in the code behind with this:

protected void btnClearFields_Click(object sender, EventArgs e)
{
    txtFrom.Text = "";
    txtTo.Text = "";
}

And here is the relevant front end code:

<table>
    <tr>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <td>
                    <asp:Label ID="lblFrom" runat="server" Text="From:"></asp:Label>
                    <br />
                </td>
                <td>
                    <asp:TextBox ID="txtFrom" runat="server"></asp:TextBox>
                </td>
                <td>
                    <obout:Calendar runat="server" ID="CalendarFrom" TextBoxId="txtFrom" StyleFolder="Calendar/styles/orbitz" ScriptPath="Calendar/calendarscript" DatePickerButtonText <IMG src='Images/calendar.gif' align=absMiddle border=0>" ShowYearSelector="true" DateMin="1/1/1900" AllowDeselect="false" DatePickerMode="true" />
                </td>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
                <td>
                    <asp:Label ID="lblTo" runat="server" Text="To:"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="txtTo" runat="server"></asp:TextBox>
                </td>
                <td>
                    <obout:Calendar runat="server" ID="CalendarTo" TextBoxId="txtTo" StyleFolder="Calendar/styles/orbitz" ScriptPath="Calendar/calendarscript" DatePickerButtonText <IMG src='Images/calendar.gif' align=absMiddle border=0>" ShowYearSelector="true" DateMin="1/1/1900" AllowDeselect="false" DatePickerMode="true" />
                </td>
            </ContentTemplate>
        </asp:UpdatePanel>
    </tr>
</table>

Now, the problem I am having is that when I first load the page, all is well. I can select a date from the calendars and it will fill in the text boxes as expected. However, if I click the "Clear Fields" button, which causes a partial postback, then things go wrong. When I go to click on the calendar icon again (after the fields have been cleared), the formatting of the date selector that pops up is messed up. The calendar portion of it is just a red square, can't select any dates. The year selector bar stretches across the entire screen, and changing the year doesn't do anything for the calendar.

I couldn't find any similar problems in my research, so I am not sure what to try. I have tried using only one UpdatePanel around the entire table, but then I get the same problem. I have also tried not including the calendar in the UpdatePanels, which will not "break" the calendars, but it will put two new TextBox fields on my webpage (which will accept any new values from the calendar) and not clear the old ones. Also tried putting both the button and the table containing the calendar in the same UpdatePanel, but I get the same red box there too.

Answer 1

Found a very similar problem in this answer. I had encountered the problem of my UpdatePanel duplicating contents when I didn't include the Obout calendar in it. I fixed this problem by moving my UpdatePanels to surround only the asp:TextBox like so:

<td>
    <asp:Label ID="lblFrom" runat="server" Text="From:"></asp:Label>
    <br />
</td>
<td>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:TextBox ID="txtFrom" runat="server"></asp:TextBox>
        </ContentTemplate>
    </asp:UpdatePanel>
</td>
<td>
    <obout:Calendar runat="server" ID="CalendarFrom" TextBoxId="txtFrom" StyleFolder="Calendar/styles/orbitz" ScriptPath="Calendar/calendarscript" DatePickerButtonText <IMG src='Images/calendar.gif' align=absMiddle border=0>" ShowYearSelector="true" DateMin="1/1/1900" AllowDeselect="false" DatePickerMode="true" />
</td>

This also meant that I did not have to update the Obout Calendar, which solved the original problem.