根据另一个 HTML5 日期值设置 HTML5 日期字段最小值答案

【问题标题】：Set HTML5 Date field Min value based on another HTML5 Date Value根据另一个 HTML5 日期值设置 HTML5 日期字段最小值
【发布时间】：2020-07-15 13:22:05
【问题描述】：

我正在尝试根据另一个 HTML5 日期输入中设置的值来设置 HTML5 日期输入的最小日期。

因此，如果您在第一个日期字段中选择 2020 年 4 月 3 日，则第二个日期输入的 min 值将是 2020 年 4 月 3 日。

我尝试使用第一个日期输入的值，但这不起作用。任何建议都会很棒。

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();

if (dd < 10) {
  dd = '0' + dd
}

if (mm < 10) {
  mm = '0' + mm
}

today = yyyy + '-' + mm + '-' + dd;
document.getElementById("fDate").setAttribute("min", today);

function myFunction() {
  var minToDate = document.getElementById("fDate").value;
  document.getElementById("fDate").setAttribute("min", minToDate);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<input type="date" id="fDate" onBlur="myFunction()">
<input type="date" id="tDate">

【问题讨论】：

标签： javascript jquery html date

【解决方案1】：

您的逻辑不起作用，因为您将 min 设置为 fDate，而不是 tDate。

您还应该避免使用内联 onX 事件属性，因为它们已经过时并且不再是好的做法。改为使用不显眼的事件处理程序。逻辑可以进一步简化，因为min 接受一个 Date 对象，所以你不需要修改 Date 对象来形成一个字符串。

还值得注意的是，min 设置不会阻止用户输入日期之前该值。它仅在表单提交时用于验证，如下例中单击Submit 按钮时所见。

let fDate = document.querySelector('#fDate');
let tDate = document.querySelector('#tDate');

fDate.addEventListener('change', function() {
  tDate.min = this.value;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form>
  <input type="date" id="fDate" />
  <input type="date" id="tDate" />
  <button>Submit</button>
</form>

【讨论】：

【解决方案2】：

将 fdate 更改为 tdate

document.getElementById("fDate").setAttribute("min", minToDate);

到

document.getElementById("tDate").setAttribute("min", minToDate);

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();

if (dd < 10) {
  dd = '0' + dd
}

if (mm < 10) {
  mm = '0' + mm
}

today = yyyy + '-' + mm + '-' + dd;
document.getElementById("fDate").setAttribute("min", today);

function myFunction() {
  var minToDate = document.getElementById("fDate").value;
  document.getElementById("tDate").setAttribute("min", minToDate);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<input type="date" id="fDate" onBlur="myFunction()">
<input type="date" id="tDate">

【讨论】：

【解决方案3】：

您想将最小值设置为第二个日期选择器，因此您需要获取该元素：

function myFunction() {
  var minToDate = document.getElementById("fDate").value;
  document.getElementById("tDate").setAttribute("min", minToDate);
}

【讨论】：