title: Automatically changes end date after start date is picked
body: <p>So I have this scenario with a screen like below:</p>
  
  <p><a href="https://i.stack.imgur.com/rGXpU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rGXpU.png" alt="enter image description here"></a></p>
  
  <p>I am trying to make the end date always 7 days greater than the start date. So when I change the start date to <code>2019-05-01</code>,then end date should be <code>2019-05-08</code> and so on and so forth.</p>
  
  <p>I am using datepicker library to make this work.</p>
  
  <p>Code:</p>
  
  <pre><code>Start Date:&amp;emsp;&lt;input class="txtStartDate" style="font: 13px/1.231 Trebuchet MS;" type="text" id="txtStartDate" name="Start Date" value="&lt;%=currentDate%&gt;" readonly&gt;&lt;br&gt;&lt;br&gt;
  
  
  End Date: &amp;emsp; &lt;input class="txtEndDate" style="font: 13px/1.231 Trebuchet MS;" type="text" id="txtEndDate" name="txtEndDate" value="&lt;%=defaultDate%&gt;"  readonly required/&gt;&lt;br&gt;&lt;br&gt;
  
  
  &lt;script&gt;
  
  $(function() {
  
    $(".txtEndDate").datepicker({
      changeMonth: true,
      changeYear: true,
      showOn: 'button',
      buttonImage: '../../../images/calendar.png',
      buttonImageOnly: true,
      title: 'Click to open calendar',
      alt: 'Click to open calendar'
    });
  });
  
  $(function() {
  
    $(".txtStartDate").datepicker({
      changeMonth: true,
      changeYear: true,
      showOn: 'button',
      buttonImage: '../../../images/calendar.png',
      buttonImageOnly: true,
      title: 'Click to open calendar',
      alt: 'Click to open calendar'
    });
  });
  
  $('#txtStartDate').datepicker();
  $('#txtEndDate').datepicker();
  
  $('#txtStartDate').change(function() {
    var interval = 7;
  
    function convertDateString(p) {
      return (p &lt; 10) ? '0' + p : p;
    }
  
    var startDate = new Date($(this).val());
    startDate.setDate(startDate.getDate() + interval);
    $('#txtEndDate').val(startDate.getFullYear() + '/' + convertDateString(startDate.getMonth() + 1) + '/' + convertDateString(startDate.getDate()));
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I implemented an onchange function to get it to work but there's no changes to it, is there anything I did wrong?</p>
  
  <p>Screenshot of my datepicker:</p>
  
  <p><a href="https://i.stack.imgur.com/jlubj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jlubj.png" alt="enter image description here"></a></p>