Date range validation with jQuery UI datepicker: order of events
<p>I'm using Jörn Zaefferer's jQuery validation plugin alongside the jQuery UI datepicker.  I've created a set of custom rules for validating that a start date is prior to an end date.  </p>

<p>The issue I have is that when I have an invalid range and use the datepicker UI to change a date to make the range valid, I see the validation running with the old values (and thus keeping the fields invalidated) prior to the onSelect callback firing for the datepicker.</p>

<p>I would expect that the datepicker would update the input's value when the user selects, and that any validation code would run when that happens and see the new value.  But that doesn't seem to happen.</p>

<p>I've tried initializing the datepicker before initializing validation in hopes that the order the events were wired in would make the difference, but you can see it hasn't helped.</p>

<p><strong><a href="https://jsfiddle.net/jinglesthula/nkvpsumq/" rel="nofollow">Here's the fiddle</a></strong></p>

<p><strong>To reproduce the issue</strong>, enter the 15th of a given month in the start, and the 7th of the same month in the end. Click the start field and then click or tab out to trigger validation.  The fields correctly invalidate.  Now click the start field and select the 1st of the same month.  Note what's output at this point on the console.</p>

<p>The code, for reference:</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;form id="daterange-form"&gt;
  &lt;div class="form-group"&gt;
      &lt;label for="startDate"&gt;Start Date&lt;/label&gt;
      &lt;input type="text" id="startDate" name="startDate" class="validDate form-control" /&gt;
  &lt;/div&gt;

  &lt;div class="form-group"&gt;
      &lt;label for="endDate"&gt;End Date&lt;/label&gt;
      &lt;input type="text" id="endDate" name="endDate" class="validDate form-control" /&gt;
  &lt;/div&gt;
  &lt;button type="submit" class="btn"&gt;Submit&lt;/button&gt;
&lt;/form&gt;
</code></pre>

<p><strong>JavaScript</strong></p>

<pre><code>// Custom Rules
$.validator.addMethod('dateBefore', function(value, element, params) {
  // if end date is valid, validate it as well
  console.log('dateBefore', value, element, params)
  var end = $(params);
  if (!end.data('validation.running')) {
    $(element).data('validation.running', true);
    // The validator internally keeps track of which element is being validated currently.  This ensures that validating 'end' will not trample 'start'
    // see http://stackoverflow.com/questions/22107742/jquery-validation-date-range-issue
    setTimeout($.proxy(
      function() {
        this.element(end);
      }, this), 0);
    // Ensure clearing the 'flag' happens after the validation of 'end' to prevent endless looping
    setTimeout(function(){
      $(element).data('validation.running', false);
    }, 0);
  }
  return this.optional(element) || this.optional(end[0]) || new Date(value) &lt; new Date(end.val());    
}, 'Must be before its end date');

$.validator.addMethod('dateAfter', function(value, element, params) {
  // if start date is valid, validate it as well
  console.log('dateAfter', value, element, params)
  var start = $(params);
  if (!start.data('validation.running')) {
    $(element).data('validation.running', true);
    // The validator internally keeps track of which element is being validated currently.  This ensures that validating 'end' will not trample 'start'
    // see http://stackoverflow.com/questions/22107742/jquery-validation-date-range-issue
    setTimeout($.proxy(
      function() {
        this.element(start);
      }, this), 0);
    // Ensure clearing the 'flag' happens after the validation of 'end' to prevent endless looping
    setTimeout(function() {
      $(element).data('validation.running', false);
    }, 0);
  }
  return this.optional(element) || this.optional(start[0]) || new Date(value) &gt; new Date($(params).val());    
}, 'Must be after its start date');


// Code setting up datepicker and validation
$('#startDate, #endDate').datepicker({
  onSelect: function(dateText, inst) {
    console.log('onSelect', dateText, inst)
  }
});
$('#daterange-form').validate({
  debug: true,
  rules: {
    startDate: {dateBefore: '#endDate'},
    endDate: {dateAfter: '#startDate'}
  }
});
</code></pre>

<p>Side note:  the timeouts and proxy calls in the rules are because this version of the library internally assumes serial validation.  If you try to validate another field in the middle of a rule, Bad Things happen.  The <code>validation.running</code> semaphore code is to prevent infinite looping.</p>