Using ASP.Net AJAX To Auto Update From Date and To Date textboxes

Friday, January 30, 2009


If you have ever had to make a hotel reservation on line you may have seen this functionality. Basically there is a field for a check-in date and there is also a field for a check-out date. Typically the websites have cool popup windows with a calendar in it that when selected, the text field is automatically updated with the chosen date. It then gets a little bit more complicated because usually when you select the check in date, the check out-date is automatically updated also.

 Let's take a look at how to a this with ASP.AJAX and the Ajax Control Toolkit CanderExtender.

 The Mark Up

   32 <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">

   33         <ContentTemplate>

   34             <div class="DatePanel">

   35                 <table>

   36                     <tr>

   37                         <td>

   38                             from date:

   39                             <asp:TextBox runat="server" ID="txtFromDate" onFocus="javascript:this.blur();" Width="80"

   40                                 autocomplete="off" AutoPostBack="true" OnTextChanged="txtFromDate_TextChanged" />

   41                             <asp:ImageButton runat="Server" ID="Image1" ImageUrl="~/images/Calendar_scheduleHS.png"

   42                                 AlternateText="Click to show calendar" /><br />

   43                             <cc1:CalendarExtender ID="calendarButtonExtender" runat="server" TargetControlID="txtFromDate"

   44                                 PopupButtonID="Image1" />

   45                             <asp:RangeValidator ID="RangeValidatorFromDate" runat="server" ErrorMessage="Please enter a date a greater than or equal today's date"

   46                                 ControlToValidate="txtFromDate" Type="Date"></asp:RangeValidator>

   47                         </td>

   48                         <td>

   49                             &nbsp;&nbsp;&nbsp; to date:

   50                             <asp:TextBox runat="server" ID="txtToDate" onFocus="javascript:this.blur();" Width="80"

   51                                 autocomplete="off" OnTextChanged="txtToDate_TextChanged" AutoPostBack="true"/>

   52                             <asp:ImageButton runat="Server" ID="Image2" ImageUrl="~/images/Calendar_scheduleHS.png"

   53                                 AlternateText="Click to show calendar" /><br />

   54                             <cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtToDate"

   55                                 PopupButtonID="Image2" />

   56                             <asp:RangeValidator ID="RangeValidatorToDate" runat="server" ErrorMessage="Please enter a date a greater than or equal today's date."

   57                                 ControlToValidate="txtToDate" Type="Date"></asp:RangeValidator>

   58                         </td>

   59                     </tr>

   60                 </table>

   61                 <br />

   62                 <br />

   63             </div>

   64         </ContentTemplate>

   65         <Triggers>

   66             <asp:AsyncPostBackTrigger ControlID="txtFromDate" EventName="TextChanged" />

   67             <asp:AsyncPostBackTrigger ControlID="txtToDate" EventName="TextChanged" />

   68         </Triggers>

   69     </asp:UpdatePanel>

The textbox could be wired many different ways, but here is what I did.

  • First off, I set the OnFocus property to blur. This blocks the user's from entering a date in the texbox directly.  I did not want the user to have the ability to enter an incorrectly formated date, so I am only allowing them to enter the date only by using the calendar control.
  • Because I want to update the "to date" when the text changes in the "from date", I have set the OnTextChange event to fire which will map to our function that will do the update.  I have also set the AutoPostback property to true, so it knows to make a postback.  Because we also have this event mapped to UpdatePanel trigger, it will do an asynchronous call to the function causing only this section of the page to update.
  • The ImageButton will fire the popup calendar.
  • The CalendarExtender control them maps the Textbox and the ImageButton so they work in tandom.  Because I am using an ImageButton, the calendar will automatically disappear when the date is selected.
  • I have a RangeValidator that basically checks to make sure the date is not before today's date.
  • The same thing is then done for the "to date" controls.
  • All of this is then wrapped by an UpdatePanel (note: make sure you set the ToolScriptManager to enable partial rendering and you also set the UpdatePanel's UdateMode to "Conditional" for better performance).
  • The triggers are then set to asynchronously post back when text changes.

The Page_Load Event

I would definatelly refactor this code later but for simplicity sake I am just puttong the code right on the page load event.

   19 protected void Page_Load(object sender, EventArgs e)

   20         {

   21             if (!Page.IsPostBack)

   22             {

   23                 RangeValidatorFromDate.MinimumValue = DateTime.Today.ToShortDateString();

   24                 RangeValidatorFromDate.MaximumValue = DateTime.MaxValue.ToShortDateString();

   25                 RangeValidatorToDate.MinimumValue = DateTime.Today.ToShortDateString();

   26                 RangeValidatorToDate.MaximumValue = DateTime.MaxValue.ToShortDateString();

   27                 txtFromDate.Text = DateTime.Today.ToShortDateString();

   28                 txtToDate.Text = DateTime.Today.AddDays(30).ToShortDateString();


   30             }



   33         }

Here all I am doing is setting the RangeValidator exception rules, and I also setting the default date to be today and 30 days from now.

The Text Change Events

   35         protected void txtFromDate_TextChanged(object sender, EventArgs e)

   36         {

   37             DateTime fromDate = Convert.ToDateTime(txtFromDate.Text);


   39             if (fromDate >= DateTime.Today)

   40                 txtToDate.Text = fromDate.AddDays(30).ToShortDateString();

   41             else

   42             {

   43                 txtFromDate.Text = DateTime.Today.ToShortDateString();

   44                 RangeValidatorFromDate.IsValid = false;


   46             }

   47         }


   49         protected void txtToDate_TextChanged(object sender, EventArgs e)

   50         {

   51             DateTime toDate = Convert.ToDateTime(txtToDate.Text);

   52             DateTime fromDate = Convert.ToDateTime(txtFromDate.Text);


   54             if (toDate < fromDate && toDate >= DateTime.Today)

   55                 txtFromDate.Text = toDate.ToShortDateString();

   56             else

   57             {

   58                 if (toDate < DateTime.Today)

   59                 {

   60                     txtFromDate.Text = DateTime.Today.ToShortDateString();

   61                     txtToDate.Text = DateTime.Today.AddDays(30).ToShortDateString();

   62                     RangeValidatorToDate.IsValid = false;

   63                 }

   64             }


   66         }

  • When the "from date" is selected, I want to change the "to date" to be 30 days from now.  If the date is less than today, I want to set the "to date" back to today.
  • When the "to date" is selected, if it is less than the "from date", then I want to set the "from date" to be the same date.  If the "to date" is less than today's date, then I want warn the user and set the dates back to the default dates.
 Not too difficult.




comments powered by Disqus