Restrict picking minimum and maximum date with vanilla javascript for hotel reservation

Question

I have a form for hotel reservation. I just need to validate the checkin date and the checkout date, don‘t look for a whole booking engine either.

I have 2 input date fields, one for CHECKIN, the other for CHECKOUT. The minimum CHECKIN date should be 2 days after the current day, and the minimum CHECKOUT date, 3 days after the current day.

I made two blocks of javascript, one for the CHECKIN date and the other for the CHECKOUT. As per I noticed that the CHECKOUT script block works, but no the first one, I changed the variable names for the second block and this is still working. The input date for the checkout is set well.

Each block have different ID target to each of the fields (checkin and checkout). I‘d like to know why one block is overriding the other one and don‘t want to allow the user to select a checkout date previous to the checkin date which will be an absurd.

Here is my code:

// Scripts for CHECKIN date
function formatISOLocal(d) {
  let z = n => ('0' + n).slice(-2);
  return d.getFullYear() + '-' + z(d.getMonth() + 1) + '-' + z(d.getDate());
}

window.onload = function() {
  let inp = document.querySelector('#checkIn');
  let d = new Date();
  d.setDate(d.getDate() + 2); /*Minimum date for CHECKIN*/
  console.log(formatISOLocal(d));
  inp.min = formatISOLocal(d);
  inp.defaultValue = inp.min;
  d.setMonth(d.getMonth() + 3);
  inp.max = formatISOLocal(d);
}

// Scripts for CHECKOUT date
function formatISOLocal1(e) {
  let a = o => ('0' + o).slice(-2);
  return e.getFullYear() + '-' + a(e.getMonth() + 1) + '-' + a(e.getDate());
}

window.onload = function() {
  let out = document.querySelector('#checkOut');
  let e = new Date();
  e.setDate(e.getDate() + 3); /*Minimum date for CHECKOUT*/
  out.min = formatISOLocal1(e);
  out.defaultValue = out.min;
  e.setMonth(e.getMonth() + 4);
  out.max = formatISOLocal1(e);
}

<input type="date" id="checkIn" name="checkIn" required>
<input type="date" id="checkOut" name="checkOut" required>

I also share my codepen. Orientations, please.

Answer 1

Make a script that will set the minimum of the second date to the first date

var a = document.getElementById("a");
var b = document.getElementById("b");

a.addEventListener("input", function() {
  b.min = a.value;
});

a.min = new Date().getFullYear()+"-"+new Date().getDate()+"-"+(new Date().getMonth()+1);

<input type="date" id="a"> From<br>
<input type="date" id="b"> To

Answer 2

The second window.onload overwrites the first so it never runs. Combine the code into one onload and use only one formatISOLocal, e.g.

function formatISOLocal(d) {
  let z = n => ('0' + n).slice(-2);
  return d.getFullYear() + '-' + z(d.getMonth() + 1) + '-' + z(d.getDate());
}

window.onload = function() {
  let inp = document.querySelector('#checkIn');
  let d = new Date();
  d.setDate(d.getDate() + 2); /*Minimum date for CHECKIN*/
  console.log(formatISOLocal(d));
  inp.min = formatISOLocal(d);
  inp.defaultValue = inp.min;
  d.setMonth(d.getMonth() + 3);
  inp.max = formatISOLocal(d);

  let out = document.querySelector('#checkOut');
  let e = new Date();
  e.setDate(e.getDate() + 3); /*Minimum date for CHECKOUT*/
  out.min = formatISOLocal(e);
  out.defaultValue = out.min;
  e.setMonth(e.getMonth() + 4);
  out.max = formatISOLocal(e);
}

<input type="date" id="checkIn" name="checkIn" required>
<input type="date" id="checkOut" name="checkOut" required>