Question

这个问题可能与另一个问题类似：

但是我不想使用button，只需使其即时即可。

我有2个类型为date的输入，我想在它们之间进行比较。

<div>
  <label style="font-family: 'Segoe UI';">Select a date.</label>
  <br><br>
  <span style="font-family: 'Segoe UI';">Since</span>&nbsp;
  <input type="date" name="since"  id="since" required="required" style="font-family: 'Segoe UI';"/>&nbsp;&nbsp;

  <span style="font-family: 'Segoe UI';">Until</span>&nbsp;
  <input type="date" name="until" id="until" required="required" style="font-family: 'Segoe UI';"/>
  <br><br>
  <button style="font-size: 14px; font-family: 'Segoe UI';" onclick="Validate()">COMPARE THIS</button>
</div>

<script type="text/javascript">
  function Validate(){
    var date1 = new Date(document.getElementById('since').value);
    var date2 = new Date(document.getElementById('until').value);
  
    if(date2 < date1) {

        alert('The date cannot be less than the first date that you selected');
        return false;

    }else{
        alert("It's OK");
        return true;
    }
  }
</script>

现在条件可以完美运行，它比较两个日期，如果第二个日期小于第一个日期，则会显示错误。但这是使用按钮触发比较的。

是否可以在没有按钮触发比较的情况下比较输入日期？并使用HTMLSelectElement.setCustomValidity()方法？

Answer 1

我认为您可以使用onchange事件来执行此操作。我对您的代码段做了一些修改，并为不进行验证提供了简单的条件。您可以对其进行调整，使其更加复杂。

<div>
  <label style="font-family: 'Segoe UI';">Select a date.</label>
  <br><br>
  <span style="font-family: 'Segoe UI';">Since</span>&nbsp;
  <input onchange="Validate()" type="date" name="since"  id="since" required="required" style="font-family: 'Segoe UI';"/>&nbsp;&nbsp;

  <span style="font-family: 'Segoe UI';">Until</span>&nbsp;
  <input onchange="Validate()" type="date" name="until" id="until" required="required" style="font-family: 'Segoe UI';"/>
</div>

<script type="text/javascript">
  function Validate(){
    var input1 = document.getElementById('since').value;
    var input2 = document.getElementById('until').value;
  if(input1 != "" && input2 != ""){
      var date1 = new Date(input1);
      var date2 = new Date(input2);

      if(date2 < date1) {

          alert('The date cannot be less than the first date that you selected');
          return false;

      }else{
          alert("It's OK");
          return true;
      }
    }
  }
</script>

Answer 2

您需要注意与options(knitr.kable.NA="") knitr::kable(...) # |var1 | var2|var4 | var3| # |:----|----:|:----------|----:| # |D | 7|2018-01-03 | 6.50| # |C | 5|2018-01-04 | 4.20| # |B | 4|2018-01-06 | 4.00| # |A | 3|2018-01-07 | 3.20| # | | 2|2018-01-09 | 2.43| # | | |2018-01-10 | 2.30| # | | | | 1.34| # | | | | 1.20| # | | | | 0.34|一起使用哪个事件，以避免意外的结果。一旦用户在日期的最后一个空白部分中输入任何数字，就可能触发<input type="date">和input事件（由于对change的支持不全，因此在浏览器中不一定是一致的）。 / p>

例如（在Chrome中），如果用户输入“ 12”作为月份，输入“ 31”作为日期，然后在年份中输入“ 2”（意在输入“ 2018”），一旦输入“ 2”，就会触发<input type="date">和input事件，并且在您的情况下，验证功能会将“ 12/31/0002”与其他日期进行比较，直到用户完成输入“年份（当用户尝试输入剩余的年份数字时，会重复发生）。您可能可以根据您如何将验证结果通知用户的方式来适当地解决此问题，但是如果您使用change会很麻烦。

因此，使用alert()之类的事件来触发您的验证比较可能更安全。像这样：

blur

const since = document.querySelector('#since');
const until = document.querySelector('#until');
const message = document.querySelector('#message');

const compareDates = () => {
  let sval = since.value;
  let uval = until.value;
  if (sval && uval && (uval < sval)) {
    message.innerHTML = 'The "Until" date must come after the "Since" date.';
  } else {
    message.innerHTML = '';
  }
}

since.addEventListener('blur', compareDates);
until.addEventListener('blur', compareDates);

#message {
  margin: 8px 0;
  color: red;
}

在用户输入上“立即”比较日期值

2 个答案: