mega6382
mega6382

Reputation: 9396

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

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.

Upvotes: 3

Views: 30054

Answers (3)

epascarello
epascarello

Reputation: 207511

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.

Upvotes: 8

Y2H
Y2H

Reputation: 2537

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

Upvotes: 3

J.T. Blum
J.T. Blum

Reputation: 324

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.

Upvotes: 0

Related Questions