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

Question

我正在尝试根据另一个 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">

Answer 1

将 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">

Answer 2

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

function myFunction() {

  var minToDate = document.getElementById("fDate").value;

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

}

Answer 3

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

您还应该避免使用内联onX事件属性，因为它们已经过时并且不再是良好的做法。请改用不显眼的事件处理程序。由于接受 Date 对象，因此可以进一步简化逻辑min，因此您不需要修改 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>