title: JS dates and jQuery UI slider being strange
body: <p>I am creating a range slider in jQuery UI that has a certain date (2013-12-3) to today's date.</p>
  
  <p>I need to range to be able to select every single date between these two.</p>
  
  <p>However whenever I try to change the date using my slider it behaves very strangely. </p>
  
  <p>I am using the slider to select days and then creating the new dates by adding them onto the start date.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
   var startDate = new Date(2013, 12, 3);
   var endDate = new Date();
   var timeDiff = Math.abs(endDate.getTime() - startDate.getTime());
   var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
   
   var fromDate = new Date(2013, 12, 3);
   var toDate = new Date();
   
   $("#rangeSlider").slider({
    range: true,
    min: 0,
    max: diffDays,
    animate: true,
    slide: function (event, ui) {
     fromDate.setDate(startDate.getDate() + ui.values[0]);
     toDate.setDate(startDate.getDate() + ui.values[1]);
     
     $("#rangeFromDate").html(fromDate.getFullYear() + "-" + (fromDate.getMonth() + 1) + "-" + fromDate.getDate());
     $("#rangeToDate").html(toDate.getFullYear() + "-" + (toDate.getMonth() + 1) + "-" + toDate.getDate());
    }
   }); 
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#rangeSlider {
    margin: 20px;
    margin-top: 100px;
   }
  #rangeFrom {
   float: left;
  }
  #rangeTo {
   float: right;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"&gt;
  &lt;script src="https://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"&gt;&lt;/script&gt; 
  
  &lt;div id="rangeSlider"&gt;&lt;/div&gt;
  
  &lt;span id="rangeFrom"&gt;From: &lt;span id="rangeFromDate"&gt;2013-12-3&lt;/span&gt;&lt;/span&gt;
  &lt;span id="rangeTo"&gt;To: &lt;span id="rangeToDate"&gt;2016-12-12&lt;/span&gt;&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>EDIT:</strong> I need the dates to be shown in ISO format and I need the dual handles on my slider</p>