13

I have a CalendarExtender control on my page and sometimes have to change the date to the next occuring Sunday. I'm currently using the OnClientDateSelectionChanged property of the control to call a function that will add some days to the date until its Sunday.

The problem I'm having is that if I select a Tuesday in my calendar, the textbox will display the next Sunday but the selected date in the calendar is still Tuesday.

How do I update the CalendarExtender to have the new date that has one I selected in javascript? The textbox the CalendarExtendar is connected to shows the correct date...

Miles
  • 5,646
  • 18
  • 62
  • 86
  • is there any reason why you chose to use this calendar control instead of the jquery datepicker plug-in? – TStamper May 05 '09 at 14:14
  • 1
    I chose to use this calendar control because I'm developing in ASP.Net and we have to limit what we use. We already have the Ajax control toolkit in our project so I have to stick to that. – Miles May 05 '09 at 14:41

2 Answers2

30

Changing the value of the textbox that is the TargetControlId for the CalendarExtender affects the selected date if the following 2 conditions are met:

  1. An onchange event is fired on the textbox (either by changing the text manually or by calling an explicit javascript fireEvent() method.
  2. The format of the date entered in the textbox matches the same format used by the CalendarExtender control.

That being said, the correct way to handle this is to call the set_selectedDate() function of the CalendarExtender control. This one call, not only sets the selected on the Calendar, but also on the Targeted textbox at the same time.

Here's the example code:

<cc1:CalendarExtender ID="CalendarExtender1" runat="server" 
        OnClientDateSelectionChanged="dateSelectionChanged" 
        TargetControlID="txtDate" PopupButtonID="imgCalendar">
</cc1:CalendarExtender>

<script type="text/javascript">
  function dateSelectionChanged(sender, args){
    selectedDate = sender.get_selectedDate();
    /* replace this next line with your JS code to get the Sunday date */
    sundayDate = getSundayDateUsingYourAlgorithm(selectedDate); 
    /* this sets the date on both the calendar and textbox */
    sender.set_SelectedDate(sundayDate); 
 }
</script>
Jose Basilio
  • 50,714
  • 13
  • 121
  • 117
  • well, i tried that and didn't get it to work. I'm gonna try putting the code in the comments... Here's what I have: function onDateSelected(sender, args) { var selectedDate = sender.get_selectedDate(); while(selectedDate.getDay() != 0) selectedDate.setDate(selectedDate.getDate() + 1); // alert(selectedDate); sender.setSelectedDate(selectedDate); alert('finished'); } I see the alert that shows me the date and its the right date, but I never see the finished box because I get a javascript error before that. – Miles May 14 '09 at 16:22
  • Here's the error I get: Object doesn't support this property or method – Miles May 14 '09 at 16:23
  • Are you using a specific version of the AjaxToolkit? I've got 1.0.20229.0 – Miles May 14 '09 at 16:24
  • Sorry, forgot to put my code for the calendar extender: – Miles May 14 '09 at 16:26
  • 1
    well, just found the mistake, you had in there sender.setSelectedDate and it was sender.set_selectedDate. Thanks for the help – Miles May 14 '09 at 16:35
  • 1
    I'm glad you got it to work. I can't believe I missed the underscore in the method name :-) – Jose Basilio May 14 '09 at 16:47
0
<asp:TextBox ID="txtDate" Text='<%# Bind("Date", "{0:dd-MMM-yyyy}") %>'
                                                                                            runat="server" class="form-control input-sm m-bot15" BackColor="#ffccbb"></asp:TextBox>
                                                                                        <asp:CalendarExtender ID="CalExtender1" runat="server" Enabled="true" Format="dd-MMM-yyyy"
                                                                                            TargetControlID="txtDate">
                                                                                        </asp:CalendarExtender>
Code
  • 679
  • 5
  • 9