How to set the max attribute of a date input the value of another date input x amount of days?-CodePudding

I am trying to set the max attribute of my end-date input to start-date input 4 days. In other words, the end-date cant be more than 4 days after the start date. I fixed all the other attributes but am not able to fix this.

My html and JS for the other attributes:

 <div class="calendar">

  <div>
    <label for="start">Start Dato:</label>
    <input type="date" id="start" name="start" required>
  </div>

  <div>
    <label for="end">Slutt Dato:</label>
    <input type="date" id="end" name="end" required>
  </div>

</div>

JS:

      <script>
          let today = new Date().toISOString().split('T')[0];
          let date3m = new Date();
          date3m.setMonth(date3m.getMonth()   3);
          date3m = date3m.toISOString().split('T')[0];
          document.getElementsByName("start")[0].setAttribute('min', today);
          document.getElementsByName("start")[0].setAttribute('max', date3m);
      </script>

      <script>
          let fDate = document.querySelector('#start');
          let tDate = document.querySelector('#end');

          fDate.addEventListener('change', function() {
              tDate.min = this.value;
          });
      </script>

CodePudding user response：

The following should work:

fDate.addEventListener('change', function() {
    var max = new Date(fDate.value);
    max.setDate(max.getDate()   4);
    tDate.max = max.toISOString().split('T')[0];
});