title: Javascript Date Issues
body: <p>There's some problem with the dates, the expected result should be 1st the user should input the the .start_date field, the .end_date field should change according to the .days field. How the things is the date can change but not correctly.
  For instance, today is the 27th June, when the .days field is set to 1, the .end_date field should be 28th June. However, the result turns out to be 27th June. What's the problem with the code. Thank you.</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>(function($, window, document, undefined) {
  
    $(".addSkip").click(function() {
      // row instance to use `find()` for the other input classes
      var $row = $(this).closest('tr');
  
      var date = new Date($row.find(".start_date").val()),
        days = parseInt($row.find(".days").val(), 10);
  
      if (!isNaN(date.getTime())) {
        date.setDate(date.getDate() + days);
  
        $row.find(".end_date").val(date.toInputFormat());
      } else {
        alert("Invalid Date");
      }
    });
  
    Date.prototype.toInputFormat = function() {
      var yyyy = this.getFullYear().toString();
      var mm = (this.getMonth() + 1).toString(); // getMonth() is zero-based
      var dd = this.getDate().toString();
      return yyyy + "-" + (mm[1] ? mm : "0" + mm[0]) + "-" + (dd[0] ? dd : "0" + dd[0]); // padding
    };
  })
  (jQuery, this, document);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="date" size="15" name="date[]" class="start_date" \&gt;
        &lt;input type="button" size="10" value="confirm date" class="addSkip"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" size="15" name="nextdate[]" class="end_date"  \&gt; &lt;/td&gt;
    &lt;td&gt;&lt;input type="text" size="3" name="skip[]" class="days" \&gt; &lt;/td&gt;
  
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>