Second date greater than first date in javascript

Question

I have 2 date inputs i would like the min of checkout to be set to the value of checkin.

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

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

The idea is to have the check out date to be greater than the check in date after the user enters the first date.

I have tried using a something like this (works on numbers but not dates)

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

Using onclick for the input.

Any suggestions would be great thank you.

Possible duplicate of [Compare two dates with JavaScript](http://stackoverflow.com/questions/492994/compare-two-dates-with-javascript) — Suren Srapyan, Aug 15 '16 at 06:48

score 1 · Accepted Answer · answered Aug 15 '16 at 07:05

Try this

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

score 0 · Answer 2 · answered Aug 15 '16 at 07:03

Your code works for setting the minimum. Use the 1st input change event to update the 2nd input minimum, instead of 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">

Second date greater than first date in javascript

2 Answers2