Question

我有2个日期输入，我希望min的{{1}}设置为checkout的值。

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; }作为输入。

任何建议都会非常感谢你。

Answer 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);
  }

Answer 2

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

＆＃13;

var checkIn = document.getElementById('checkIn');
var checkOut = document.getElementById('checkOut');

checkIn.addEventListener('change', updatedate);

function updatedate() {
    var firstdate = checkIn.value;
    checkOut.min = firstdate;
}

＆＃13;

#checkOut:invalid {
  color: red;
}

＆＃13;

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

＆＃13;

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

2 个答案: