javascript中的第二个日期大于第一个日期答案

【问题标题】：Second date greater than first date in javascriptjavascript中的第二个日期大于第一个日期
【发布时间】：2016-08-15 06:47:42
【问题描述】：

我有 2 个日期输入，我希望将 checkout 的 min 设置为 checkin 的值。

Check In
<input type="date" id="checkIn" name="checkIn">

Check out
<input type="date" id="checkOut" min="" name="checkOut">

这个想法是在用户输入第一个日期之后让退房日期大于入住日期。

我尝试过使用类似的东西（适用于数字但不适用于日期）

function updatedate() {
    var firstdate = document.getElementById("checkIn").value;
    document.getElementById("checkOut").min = firstdate;
}

使用onclick 作为输入。

任何建议都会非常感谢。

【问题讨论】：

Compare two dates with JavaScript的可能重复

标签： javascript html date

【解决方案1】：

试试这个

<label>Check In</label>
<input type="date" id="checkIn" name="checkIn" onchange="updatedate();">

<label>Check out</label>
<input type="date" id="checkOut" min="" name="checkOut">

  function updatedate() {
    var firstdate = document.getElementById("checkIn").value;
    document.getElementById("checkOut").value = "";
    document.getElementById("checkOut").setAttribute("min",firstdate);
  }

【讨论】：

【解决方案2】：

您的代码可用于设置最小值。使用第一个输入change 事件来更新第二个输入最小值，而不是click：

var checkIn = document.getElementById('checkIn');
var checkOut = document.getElementById('checkOut');

checkIn.addEventListener('change', updatedate);

function updatedate() {
    var firstdate = checkIn.value;
    checkOut.min = firstdate;
}

#checkOut:invalid {
  color: red;
}

<div>When the checkOut is less than the checkIn, the checkout color will change to red</div>

<label>Check in</lable>
<input type="date" id="checkIn" name="checkIn">

<label>Check out</lable>
<input type="date" id="checkOut" min="" name="checkOut">

【讨论】：