6567

Setting TextBox.Text after Selecting a Date on an Ajax CalendarExtender

Question:

On an ASP.NET page, I have a pair of CalendarExtender (AJAX Control Toolkit for ASP.NET 4.0) controls on a page acting as a date range. What I want to do is, after the user has selected the value for TextCheckInDate , populate TextCheckOutDate with TextCheckInDate+ 1 if TextCheckOutDate is empty.

Regrettably, my jQuery skills aren't yet where I'd like them to be. I know that I have to create a jQuery function that's fired when TextCheckInDate changes, I need to be able to read both textboxes, perform basic date arithmetic and write to the second textbox. The implementation eludes me. Thanks to <a href="https://stackoverflow.com/questions/2974496/jquery-javascript-convert-date-string-to-date" rel="nofollow">this post</a>, I know to use <a href="http://www.datejs.com/" rel="nofollow">date.js</a> for my date arithmetic, included below...

What I have so far:

$("input[id$='TextCheckInDate']").keyup (function (e) { checkCheckOutDate( $("#TextCheckInDate").val() ); } ); function checkCheckOutDate(checkInDate) { var startDate = Date.parse(checkInDate); if ($("#TextCheckOutDate").val() == "") { $("#TextCheckOutDate").val((1).days().after(startDate)); } }

Answer1:

Can you prohibit to enter text into date textboxes? If so, you can use following approach:

<script type="text/javascript"> function checkInDateChanged(sender, args) { var checkInDate = sender.get_selectedDate(); var checkOutDateExtender = $find("CheckOutdateExtender"); var checkOutdate = checkOutDateExtender.get_selectedDate(); if (checkOutdate == null || checkOutdate < checkInDate) { checkOutdate = new Date(checkInDate.setDate(checkInDate.getDate() + 1)); checkOutDateExtender.set_selectedDate(checkOutdate); } } </script> <asp:TextBox runat="server" ID="TextCheckInDate" /> <ajax:CalendarExtender runat="server" ID="CheckInDateCalendarExtender" TargetControlID="TextCheckInDate" OnClientDateSelectionChanged="checkInDateChanged" /> <asp:TextBox runat="server" ID="TextCheckOutDate" /> <ajax:CalendarExtender runat="server" ID="CheckOutDateCalendarExtender" BehaviorID="CheckOutdateExtender" TargetControlID="TextCheckOutDate" />

in PreRender method add code below:

TextCheckInDate.Attributes.Add("readOnly", "readonly"); TextCheckOutDate.Attributes.Add("readOnly", "readonly");

Answer2:

You should just be able to tweak your code slightly to also fire your checkCheckOutDate() function when the checkin textbox's change event fires.

$("input[id$='TextCheckInDate']").bind('keyup,change', function (e) { checkCheckOutDate( $("#TextCheckInDate").val() ); }); function checkCheckOutDate(checkInDate) { var startDate = Date.parse(checkInDate); if ($("#TextCheckOutDate").val() == "") { $("#TextCheckOutDate").val((1).days().after(startDate)); } }

Note that lots of the event methods in jQuery like click(), keyup(), etc are just wrappers around bind('click', function() { ... }).

Recommend

  • Insert a TextBox and set the formula
  • How can I change the ForeColor of the GroupBox text without changing its children ForeColor?
  • Prevent timepicker addon from opening calendar
  • Set Initial Value for Required attribute
  • How to save dynamically created textboxes and their values
  • Exception gevent.hub.LoopExit: LoopExit('This operation would block forever',)
  • abstracting over a collection
  • how to set variables in a php include file?
  • Can't remove headers after they are sent
  • How to add a focus style to an editable ComboBox in WPF
  • C++ pointer value changes with static_cast
  • WPF ICommand CanExecute(): RaiseCanExecuteChanged() or automatic handling via DispatchTimer?
  • Unable to get column index with table.getColumn method using custom table Model
  • Eloquent paginate function in Slim 3 project using twig
  • how to avoid repetitive constructor in children
  • Transactional Create with Validation in ServiceStack Redis Client
  • How to match http request and response using Jersey ContainerRequestFilter and ContainerResponseFilt
  • Is there a way to do normal logging with EureakLog?
  • Hardware Accelerated Image Scaling in windows using C++
  • How to set ini file attributes during an Inno install
  • Setting up SourceTree to merge unity3d scenes with UnityYAMLMerge
  • Email format validation in mvc3 view
  • C# - Is there a limit to the size of an httpWebRequest stream?
  • req.body is undefined - nodejs
  • How to add date and time under each post in guestbook in google app engine
  • Modifying destination and filename of gulp-svg-sprite
  • javascript inside java/jsp code
  • Importing jscolor library in angular 2
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • InvalidAuthenticityToken between subdomains when logging in with Rails app
  • SQL merge duplicate rows and join values that are different
  • Free memory of cv::Mat loaded using FileStorage API
  • Suggestions to manage Login/Logout transitions
  • -fvisibility=hidden not passed by compiler for Debug builds
  • coudnt use logback because of log4j
  • Memory offsets in inline assembly
  • Turn off referential integrity in Derby? is it possible?
  • LevelDB C iterator
  • Can't mass-assign protected attributes when import data from csv file
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize