How to change max or min value of input type date from JS

Question

I have two input type dates like:

<input type="date" name="first_date">

and other like:

<input type="date" name="second_date" min="first_date">

now what I want to do is that when first_date is selected than the minimum range of the second_date is auto filled by javascript.

Any idea how to do this.

Answer 1

Basic JavaScript using an onchange event to set the attribute.

document.getElementById("firstDateId").onchange = function () {
    var input = document.getElementById("secondDateId");
    input.setAttribute("min", this.value);
}

Code could be better using addEventListener.

Answer 2

I agree with epascarello's answer, only you can replace setAttribut("min/max") with simply .min or .max .

document.getElementById("firstDateId").onchange = function ()
{
  var input = document.getElementById("secondDateId");
  input.min = this.value;
}

Answer 3

You should be able to use JavaScript's .setAttribute('min',date) on the element. Check with the W3C for details. There's also jQuery's .attr('min',date) if you want to use a library.