CalendarExtender - set the date on client side

Article
2008-01-31

Question

_{Thursday, January 31, 2008 9:50 AM}

I have two CalendarExtender controls in a page. When the user selects a date in the first control I want to the second control's date to be set to the same date. The reason I want it is that the second date will be bigger than the first and it is very slow to change the month on the second control. If the second control's date is already set then there will be less months to be changed or none. Obviously and don't want a postback to do it.

Is it possible?

All replies (12)

_{Tuesday, February 5, 2008 10:56 PM ✅Answered}

Hi Kakao,

Here is the sample. I have tested it on IE7 & Firefox.

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                <ajaxToolkit:CalendarExtender ID="CalendarExtender1" BehaviorID="startDate" runat="server" TargetControlID="TextBox1" OnClientDateSelectionChanged="onSelectedStartDate">
                </ajaxToolkit:CalendarExtender>
                 <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                <ajaxToolkit:CalendarExtender ID="CalendarExtender2" BehaviorID="endDate" runat="server" TargetControlID="TextBox2">
                </ajaxToolkit:CalendarExtender>
                <asp:Button ID="Button1" runat="server" Text="Button" />
            </ContentTemplate>
        </asp:UpdatePanel>
        <script type="text/javascript" language="javascript">
            function onSelectedStartDate(sender,args){
                $find("endDate").set_selectedDate(sender.get_selectedDate());
            }
        </script>
    </form>
</body>
</html>

Best regards,

Jonathan

_{Thursday, January 31, 2008 10:12 AM}

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        TextBox1.Attributes.Add("onchange", "document.getElementById('" & TextBox2.ClientID & "').value = document.getElementById('" & TextBox1.ClientID & "').value;")
    End Sub

_{Thursday, January 31, 2008 10:40 AM}

It works only to a certain point. The second text box is set but it does not persist. I mean when I click in another control in an updatepanel the textbox is cleared, not even the mask appears, just blank.

I had already hard wired a function in the aspx page which did the same as yours and failed in the exact same way. Then I tried to find a way to persist that value without success. Then searched for a way to set the date directly in the second control using the CalendarExtender javascript properties but again without success.

_{Thursday, January 31, 2008 10:43 AM}

Can you post your source code? Evidently another extender is messing with it somehow.

_{Thursday, January 31, 2008 10:55 AM}

This is the updatepanel which erases the second CalendarExtender's textbox. It is a cascade dropdown. The whole page is quite big.

        <asp:UpdatePanel ID="UpdatePanel_local" runat="server" UpdateMode="conditional">
            <ContentTemplate>

            <asp:DropDownList ID="DropDownList_estados" runat="server" AutoPostBack="true" EnableViewState="true" 
                OnSelectedIndexChanged="DropDownList_estados_SelectedIndexChanged" />
            <asp:CompareValidator ID="RequiredFieldValidator_local" runat="server" 
                ControlToValidate="DropDownList_estados" Display="dynamic" 
                Type="integer" Operator="greaterThan" ValueToCompare="0">
                Escolha o estado da missão</asp:CompareValidator>

            <asp:DropDownList ID="DropDownList_municipios" runat="server" AutoPostBack="false" EnableViewState="true" />
            <asp:CompareValidator ID="CompareValidator_municipio" runat="server" 
                ControlToValidate="DropDownList_municipios" Display="dynamic" 
                Type="integer" Operator="greaterThan" ValueToCompare="0">
                Escolha o município da missão</asp:CompareValidator>
                
            </ContentTemplate>
        </asp:UpdatePanel>

_{Thursday, January 31, 2008 11:12 AM}

That doesn't seem to be it. Can you show me the source code relating to the textboxes and any extenders attached to them?

_{Thursday, February 21, 2008 10:17 AM}

Thanks, it is exactly what I wanted.

_{Wednesday, February 27, 2008 12:02 AM}

Thanks for the code. One question, what if my textboxes is on gridview?

_{Wednesday, February 27, 2008 12:40 PM}

If i change the date of the second textbox on clientside, the second CalendarExtender never recognize the new values. It takes always the old values. Did anyone know a solution for that problem? Thanks in advance.

Set ReadOnly="false" doesnt solve the problem..

_{Monday, April 14, 2008 3:16 PM}

I don't know if you have solved this, but what I found you have to do is also update the calendar extender at the same time you change the text box.

CalendarExtender1.SelectedDate = Convert.ToDateTime(START_DATE.Text)

_{Wednesday, April 16, 2008 10:01 AM}

Hi Rhogan,

thank you very much, for almost 30 days i was every day looking if someone replied to my question. Not it seemed to be solved.

If someone is still interested in this solution, it's a bit different then Rhogan says:

$find("yourCalendarExtender").set_selectedDate(Date);

That much easy, thanks again.

_{Sunday, April 11, 2010 3:36 AM}

Look this simple solution:

<p/>

sender.get_selectedDate()

Share via

CalendarExtender - set the date on client side

Question

All replies (12)

Additional resources