locked
asp.net Ajax Control ToolKit calender is not consistent RRS feed

  • Question

  • User1322120782 posted

    I have a asp.net website (webforms) which uses ajax control tool kit calender. It is attached to a text box. The user selects from and to dates from the calenders attached to, from text box and to text box. user can also change dates directly from text box.

    Functionality is, when user selects a date from from calender, the to calender date should be set based on from calender. It works fine as expected. But the problem is, when second time user changes from calender date, to calender is still showing old value even when it is set with new date.

    I searched everywhere on internet and i could not find answer.

    I think its a bug in ajax control tool kit.

    I have pasted my markup and script

    <td class="auto-style1"> <label for="fromdate"><strong>Depart</strong></label> <br /> <asp:TextBox ID="fromdate" runat="server" Enabled="true" ReadOnly="false" ></asp:TextBox> <ajaxToolkit:CalendarExtender ID="fromdatecalender" TargetControlID="fromdate" Format="dd/MM/yyyy" runat="server" BehaviorID="Calendar1" OnClientDateSelectionChanged ="dateselect"> </ajaxToolkit:CalendarExtender> </td> <td> <label for="todate"><strong>Return </strong></label> <br /> <asp:TextBox ID="todate" runat="server" Enabled="true" ReadOnly="false" ></asp:TextBox> <ajaxToolkit:CalendarExtender ID="todatecalender" TargetControlID="todate" Format="dd/MM/yyyy" runat="server" BehaviorID="Calendar2" > </ajaxToolkit:CalendarExtender> </td> 
    var calendarBehavior1 = $find("Calendar1"); var date = calendarBehavior1._selectedDate; var calendarBehavior2 = $find("Calendar2"); var newdate = new Date(parseInt(fromyear), parseInt(frommonth) - 1, parseInt(fromday) + 9); calendarBehavior2.set_selectedDate(newdate);

    Monday, October 7, 2013 8:17 AM

Answers

  • User-417640953 posted

    Hi suneelsadhu,

    Thanks for the response.

    Below is a demo made for this issue.

    <script src="../../Scripts/jquery-1.7.1.js"></script>
         <script>
             //add time by day
             function DateAdd(interval, number, date) {
                 if (date == null) { return ""; }
                 switch (interval)
                 {
                     case "day":
                         date=new Date(date);
                         date=date.valueOf();
                         date+=number*24*60*60*1000;
                         date=new Date(date);
                         return date;
                         break;
                     default:
                         return ""; break;
                 }
    
             }
    
             function dateselect() {
                 var calendarBehavior1 = $find("Calendar1");
                 var date = calendarBehavior1._selectedDate;
                 var calendarBehavior2 = $find("Calendar2");
                 calendarBehavior2.show();
                 calendarBehavior2.set_selectedDate(DateAdd("day",5,date));
                 calendarBehavior2.hide();
                        }
            
     </script>
    
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <table>
       <tr>
        <td class="auto-style1">
            <label for="fromdate">
            <strong>Depart</strong>
            </label> <br />
            <asp:TextBox ID="fromdate" runat="server" Enabled="true" ReadOnly="false" ></asp:TextBox>
            <asp:CalendarExtender ID="fromdatecalender" TargetControlID="fromdate"
                Format="dd/MM/yyyy" runat="server" BehaviorID="Calendar1"
                OnClientDateSelectionChanged ="dateselect">
            </asp:CalendarExtender>
    
        </td>
        <td>
            <label for="todate">
                <strong>Return </strong>
            </label>
            <br />
            <asp:TextBox ID="todate" runat="server" Enabled="true" ReadOnly="false" ></asp:TextBox>
            <asp:CalendarExtender ID="todatecalender" TargetControlID="todate"
                Format="dd/MM/yyyy" runat="server" BehaviorID="Calendar2" >
            </asp:CalendarExtender>
        </td>
      </tr>
    </table>

    It works fine, please try it. If any doubt feel free to back. Thanks.

     

    Best Regards!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 9, 2013 9:15 PM
  • User1322120782 posted

    Hi,

             Thank you very much. Earlier I first used hide first and later show. Now i used show first and later hide. It works perfect.

    Update: It works fine in internet explorer. But has problems with chrome.

    Thanks and Regards,

    Suneel

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 10, 2013 4:38 AM

All replies

  • User398825048 posted

    Can u try to first clear out the previous date and then get it reselected to required date?

    Wednesday, October 9, 2013 2:42 AM
  • User-417640953 posted

    Hi suneelsadhu,

    I’m glad to you post the issue to asp.net forum.

    From your description and code you provided, I see that you want to highlight the correct date in Calendar2. 

    However, if we set the selected date of Calendar2 and it wouldn’t update to highlight correct date. There are many people

    come across this issue and they have no a good solution. For this issue, I suggest you make a trick for it.

                 var calendarBehavior2 = $find("Calendar2");
                 calendarBehavior2.show();
                 calendarBehavior2.set_selectedDate(newdate);
                 calendarBehavior2.hide();

    With the two methods show() and hide(), it will refresh the selected date.

    If you interested it, please have a try. Thanks.

     

    Best Regards!

    Wednesday, October 9, 2013 3:17 AM
  • User1322120782 posted

    Thank you. I tried but it is not working.

    Wednesday, October 9, 2013 4:29 AM
  • User1322120782 posted

    Hi,

              Thank you. It works some times after hide and show. But it is not consistent. It does not work some times.

    Wednesday, October 9, 2013 4:33 AM
  • User-417640953 posted

    Hi suneelsadhu,

    Thanks for the response.

    Below is a demo made for this issue.

    <script src="../../Scripts/jquery-1.7.1.js"></script>
         <script>
             //add time by day
             function DateAdd(interval, number, date) {
                 if (date == null) { return ""; }
                 switch (interval)
                 {
                     case "day":
                         date=new Date(date);
                         date=date.valueOf();
                         date+=number*24*60*60*1000;
                         date=new Date(date);
                         return date;
                         break;
                     default:
                         return ""; break;
                 }
    
             }
    
             function dateselect() {
                 var calendarBehavior1 = $find("Calendar1");
                 var date = calendarBehavior1._selectedDate;
                 var calendarBehavior2 = $find("Calendar2");
                 calendarBehavior2.show();
                 calendarBehavior2.set_selectedDate(DateAdd("day",5,date));
                 calendarBehavior2.hide();
                        }
            
     </script>
    
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <table>
       <tr>
        <td class="auto-style1">
            <label for="fromdate">
            <strong>Depart</strong>
            </label> <br />
            <asp:TextBox ID="fromdate" runat="server" Enabled="true" ReadOnly="false" ></asp:TextBox>
            <asp:CalendarExtender ID="fromdatecalender" TargetControlID="fromdate"
                Format="dd/MM/yyyy" runat="server" BehaviorID="Calendar1"
                OnClientDateSelectionChanged ="dateselect">
            </asp:CalendarExtender>
    
        </td>
        <td>
            <label for="todate">
                <strong>Return </strong>
            </label>
            <br />
            <asp:TextBox ID="todate" runat="server" Enabled="true" ReadOnly="false" ></asp:TextBox>
            <asp:CalendarExtender ID="todatecalender" TargetControlID="todate"
                Format="dd/MM/yyyy" runat="server" BehaviorID="Calendar2" >
            </asp:CalendarExtender>
        </td>
      </tr>
    </table>

    It works fine, please try it. If any doubt feel free to back. Thanks.

     

    Best Regards!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 9, 2013 9:15 PM
  • User1322120782 posted

    Hi,

             Thank you very much. Earlier I first used hide first and later show. Now i used show first and later hide. It works perfect.

    Update: It works fine in internet explorer. But has problems with chrome.

    Thanks and Regards,

    Suneel

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 10, 2013 4:38 AM