使用香草JavaScript进行酒店预订的最低限制和最大日期

Question

我有一个用于酒店预订的表格。我只需要验证检查日期和结帐日期，也不要寻找整个预订引擎。

我有2个输入日期字段，一个用于检查，另一个用于结帐。最低检查日期应为当天后2天，以及当天3天后的最低结帐日期。

我制作了两个街区的JavaScript，一个用于检查日期，另一个用于结帐。根据我注意到结帐脚本块有效的，但是没有第一个，我更改了第二个块的变量名称，这仍然可以正常工作。结帐的输入日期设置好。

每个块对每个字段都有不同的ID目标（检查和结帐）。我想知道为什么一个块覆盖另一个块，而不想允许用户在检查日期之前选择结帐日期，这将是荒谬的。

这是我的代码：

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

第二个 window.onload 覆盖第一个，因此永远不会运行。将代码组合到一个 onload 中，仅使用一个格式化，例如

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