如何使用JS更改input type date的最大或最小值

Question

我有两个日期输入框，如下所示：

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

以及其他类似内容：

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

现在我想要做的是，当选择了first_date之后，通过javascript自动填充second_date的最小范围。有什么想法吗？

- mega6382

---

Ajax（[tag:ajax]（Stack Overflow）[Ajax（维基百科）]（http://en.wikipedia.org/wiki/Ajax_（programming）））（强烈）*暗示*您期望从服务器获得响应以执行某些操作；从您的问题中听起来，您只想使用JavaScript（完全在客户端进行）。您能否澄清一下？ - David Thomas

Ajax（异步JavaScript和XML）是JavaScript；但我猜你的意思是客户端？ - David Thomas

Answer 1

使用 onchange 事件设置属性的基本 JavaScript。

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

使用addEventListener可以让代码更好。

- epascarello

---

你是否在使用支持HTML日期输入min属性的浏览器？并非所有浏览器都支持该字段上的min属性。http://jsfiddle.net/R76AZ/1/ - epascarello

我正在使用Opera浏览器。它支持min属性。我尝试了你的代码，像这样：<input type="date" id="first_date" name="first_date" onchange='var input = document.getElementById("second_date");input.setAttribute("min", this.value);'> 它可以工作，但是当我把它写在<script>标签之间时，它就无法工作了。 - mega6382

很可能是您在元素呈现之前添加它。控制台中是否有错误？代码需要在dom ready、window onload或元素之后添加。 - epascarello

Answer 2

我同意epascarello的回答，你只需将setAttribut("min/max")替换为简单的.min或.max即可。

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

- Y2H

Answer 3

您应该能够在元素上使用JavaScript的.setAttribute('min',date)。请查看W3C以获取详细信息。如果您想使用库，还有jQuery的.attr('min',date)。

- J.T. Blum