title: jQuery UI Datepicker - Date range - Highlight days in between
body: <p>I'm looking for a way of <strong>highlighting the days in between</strong> the date range of 2 inputs on mouse over.</p>
  
  <p>This example is nearly doing what I want to achieve:
  <a href="http://hackingon.net/files/jquery_datepicker/range.htm" rel="noreferrer">http://hackingon.net/files/jquery_datepicker/range.htm</a></p>
  
  <p>Only difference is that the highlighting of the selected range should happen on two separate datepickers and on mouse over.</p>
  
  <p>Any suggestions?</p>
  
  <hr>
  
  <p>Update:</p>
  
  <p>Ok, a bit more details:</p>
  
  <p>After selecting a date from the first datepicker, the second datepicker should highlight the previous selected date. If you then mouse over a day past the previous selected day, all days in between should highlight by adding a class. </p>
  
  <hr>
  
  <p>Update:
  This is how far I got:</p>
  
  <pre><code>    $("#input-service_date_leave, #input-service_date_return").datepicker({
          rangeSelect: true,
          beforeShow: customRange,
          onSelect: customRange,
      });
  
      function customRange(input) {
          if (input.id == "input-service_date_leave") {
  
              $("#ui-datepicker-div td").die();
  
              if (selectedDate != null) { 
                  $('#input-service_date_return').datepicker('option', 'minDate', selectedDate).datepicker('refresh');
              }
          }
          if (input.id == "input-service_date_return") {
  
              $("#ui-datepicker-div td").live({
                  mouseenter: function() {
                      $(this).prevAll("td:not(.ui-datepicker-unselectable)").addClass("highlight");
                  },
                  mouseleave: function() {
                      $("#ui-datepicker-div td").removeClass("highlight");
                  }
              });
  
              var selectedDate = $("#input-service_date_leave").datepicker("getDate");                
              if (selectedDate != null) { 
                  $('#input-service_date_return').datepicker('option', 'minDate', selectedDate).datepicker('refresh');
              }
          }
      }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/mayko/WbWg3/1/" rel="noreferrer">http://jsfiddle.net/mayko/WbWg3/1/</a></p>
  
  <p>Only problem, the live event just highlights the td's of the current hovered row, but not the td's of the rows before.</p>
  
  <p>Any ideas?</p>