Synchronizing Ajax Toolkit Calendar Extender

Question

I have two Ajax Toolkit calendar extenders. One of them is a start date and the other is the corresponding end date. What I would like to happen is when a date is selected in the Start calendar the End calendar will jump to that date. This sounds pretty simple but I have been having a hard time getting it to happen.

Someone put me out of my misery... What would be the way to accomplish this?

Answer 1

here you go this worked for me

<asp:TextBox runat="server" ID="txt1" OnTextChanged="txt1_TextChanged" AutoPostBack="true"></asp:TextBox>
<ajaxToolkit:CalendarExtender runat="server" ID="cal1" TargetControlID="txt1"></ajaxToolkit:CalendarExtender>
<asp:TextBox runat="server" ID="txt2"></asp:TextBox>
<ajaxToolkit:CalendarExtender runat="server" ID="cal2" TargetControlID="txt2"></ajaxToolkit:CalendarExtender>

protected void txt1_TextChanged(object sender, EventArgs e)
{
    cal2.SelectedDate = Convert.ToDateTime(txt1.Text);
}

or you can do this through javascript I would recommend using jquery though to find the textboxes instead of using straight javascript

<asp:TextBox runat="server" ID="txt1" onchange="SetEndDate()"></asp:TextBox>
<ajaxToolkit:CalendarExtender runat="server" ID="cal1" TargetControlID="txt1"></ajaxToolkit:CalendarExtender>
<asp:TextBox runat="server" ID="txt2"></asp:TextBox>
<ajaxToolkit:CalendarExtender runat="server" ID="cal2" TargetControlID="txt2"></ajaxToolkit:CalendarExtender>

  <script type="text/javascript">
        function SetEndDate()
        {
            var txt1 = document.getElementById("txt1");
            var txt2 = document.getElementById("txt2");

            txt2.value = txt1.value
        }
    </script>