Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

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:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

      <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>

>Solution :

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];
});
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading