Setting the value of a CalendarExtender using jQuery

Posted: 14th April 2010 in AJAX, JQuery
Tags: , ,

Problem: After adding an AJAX Calendar Extender to a Text Box you need to set the date displayed in the Text Box to the Selected Date value of the Calendar Extender.

Solution: Firstly you need to ensure that the Calendar Extender, as seen below in Figure 1, has a BehaviorID value set.

Figure 1
  1. <label for="dateLastCheckedTextBox" class="textBoxLabel">Date Last Checked</label>
  2. <asp:TextBox ID="dateLastCheckedTextBox" runat="server" CssClass="textBox"  />
  3. <asp:CalendarExtender id="dateLastCheckedCalendarExtender" BehaviorID="dateLastCheckedCalendarExtender" runat="server" TargetControlID="dateLastCheckedTextBox" Format="dd/mm/yyyy"  EnabledOnClient="true" OnClientShown="checkDate" />

Then, assign the OnClientShown event of the CalendarExtender to the checkDate function shown below, setting the date using the set_selectedDate accessor.

Figure 2
  1. <script>
  2.     function checkDate(sender, args) {
  3.         var currentDate = $("input[id$='dateLastCheckedTextBox']:visible").val();
  4.         var calendarBehavior = $find("dateLastCheckedCalendarExtender");
  5.         calendarBehavior.set_selectedDate(getDateFromUkDateString(currentDate));
  6.     }
  7.     function getDateFromUkDateString(dateStr) {
  8.         dateStr = dateStr.split("/");
  9.         if (dateStr.length == 1)
  10.             return null;
  11.         else
  12.             return new Date(dateStr[2], dateStr[1] – 1, dateStr[0]);
  13.     }
  15. </script>

In this particular example I have also converted the date to UK format.

  1. […] This post was mentioned on Twitter by Gordon Duthie. Gordon Duthie said: Setting the value of a CalendarExtender using jQuery: […]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s