限制挑选最小和最大日期的香草javascript酒店预订

Question

我有一张预订酒店的表格。我只需要验证入住日期和结账日期，也不要寻找整个预订引擎。

我有两个输入日期字段，一个用于CHECKIN，另一个用于CHECKOUT。最小CHECKIN日期应为当前日期后2天，最小CHECKOUT日期应为当前日期后3天。

我做了两个javascript块，一个用于CHECKIN日期，另一个用于CHECKOUT。按我注意到结账脚本块的作品,但没有第一个,我改变了第二块的变量名,这仍然是工作。结帐的输入日期设置得很好。

每个块对每个字段都有不同的ID目标(checkin和checkout)。我想知道为什么一个块会覆盖另一个块，并且不想让用户选择在签入日期之前的签出日期，这将是荒谬的。

下面是我的代码:

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

我也分享我的codepen。请取向。

Answer 1

第二个窗口。Onload覆盖第一个，因此它永远不会运行。将代码组合成一个onload，并且只使用一个formatISOLocal，例如

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>

Answer 2

编写一个脚本，将第二个日期的最小值设置为第一个日期

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