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:
<input type="date" id="checkIn" name="checkIn" required>
<input type="date" id="checkOut" name="checkOut" required>
<!--Scripts for CHECKIN date-->
<script>
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*/
inp.min = formatISOLocal(d);
inp.defaultValue = inp.min;
d.setMonth(d.getMonth() + 3);
inp.max = formatISOLocal(d);
}
</script>
<!--Scripts for CHECKOUT date-->
<script>
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);
}
</script>
I also share my codepen. Orientations, please.
Make a script that will set the minimum of the second date to the first date
<input type="date" id="a"> From<br>
<input type="date" id="b"> To
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);