AJAX Toolkit CalendarExtender Issue

I am going to write a web application using AJAX Toolkit. In one of the application modules, I have to use calendar control. To meet this requirement I am using CalendarExtender with a TextBox control. I have a problem when I submit the form having this controls combination. The problem is that I am unable to get Text field value after submitting the form. I have written a sample page to make my point cleat to you. Here is the code:

<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
string strDate = "";
strDate = txtCheckinDate.Text;
}

</script>

...

...

<div>

<asp:TextBox ID="txtCheckinDate" runat="server" ReadOnly="True"></asp:TextBox>
<asp:ImageButton ID="btnCalendar" runat="server" AlternateText="Click to show calendar" ImageUrl="~/images/Calendar_scheduleHS.png" />
<div style="font-size: 90%"><em>(Click the image button to open the calendar)</em></div> <br />
<ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" Format="MMMM d, yyyy" PopupButtonID="btnCalendar" Animated="true"
TargetControlID="txtCheckinDate"> </ajaxToolkit:CalendarExtender> <br />

<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /><br />
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

</div>

Would you please help me to find out the cause of problem?

Waiting your kind reply.

I created my own...Works for me. I did notice a few thing.

The ScriptManager must appear before any control that needs it.

Your page should include something like this...

<%@. Register Assembly="AjaxControlToolkit, Version=1.0.10301.0, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

and your tag prefix should look something like this

 <cc1:CalendarExtender ID="CalendarExtender1" runat="server" Format="MMMM d, yyyy" PopupButtonID="btnCalendar" Animated="true" TargetControlID="txtCheckinDate"> </cc1:CalendarExtender>

I hope that helps.