CODEWITHSUNDEEP
javascriptajaxcalendarextender
Miles
Miles

Reputation: 5726

CalendarExtender Change date with Javascript

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...

Upvotes: 13

Views: 45800

Answers (2)

Code
Code

Reputation: 739

<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>

Upvotes: 0

Jose Basilio
Jose Basilio

Reputation: 51468

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>

Upvotes: 30

Related Questions