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.

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.

• javascript
• html

• 4 Ajax (ajax (Stack Overflow) Ajax (Wikipedia)) (strongly) implies that you're expecting to get a response from a server to do something; from your question it sounds as if you want to just JavaScript (entirely client-side). Could you clarify? – David Thomas Commented May 17, 2013 at 14:42
• Ajax (Asynchronous JavaScript And XML) is JavaScript; but I guess you mean client-side? – David Thomas Commented May 17, 2013 at 14:50

3 Answers 3

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.

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

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.