如何验证所选日期（日期选择器）是否为未来日期？答案

【问题标题】：How to validate if selected date (datepicker) is a future date?如何验证所选日期（日期选择器）是否为未来日期？
【发布时间】：2020-07-17 21:48:01
【问题描述】：

我有一个日期选择器，用户可以在其中选择日期。如果日期早于当前日期，则会显示错误消息“请选择未来日期。”如果选择了未来日期，则会显示成功消息。但是，每次只显示错误消息。

日期选择器有什么独特之处吗？

function getDate() {
    var givenDate = document.myForm.inputDate.value;
  var todaysDate = new Date();
  if (givenDate >= todaysDate) {
    result.innerHTML = 'Great! You\'re starting on ' + givenDate;
    result.style.color = 'green';
  } else {
    result.innerHTML = "Please choose a future date.";
    result.style.color = 'red';
  }
}

<form name="myForm" id="myForm">
  <input type="date" id="inputDate" name="inputDate" onchange="getDate()">
</form>
<p id="result"></p>

【问题讨论】：

标签： javascript date input

【解决方案1】：

document.myForm.inputDate.value 会给你一个类似“2020-07-17”的字符串，但不是一个可比较的日期。您需要解析日期进行比较。

试试这个：

 var givenDate = Date.parse(document.myForm.inputDate.value);

function getDate() {
  var givenDate = Date.parse(document.myForm.inputDate.value);
  if (!givenDate.isNaN) {
  
   // set hours, minutes, seconds, milisecconds to zero for a comparison
   // on date only
    givenDate = new Date(givenDate).setHours(0,0,0,0);
    var todaysDate = new Date().setHours(0, 0, 0, 0); 

    if (givenDate >= todaysDate) {
      result.innerHTML = 'Great! You\'re starting on a future date or today!';
      result.style.color = 'green';
    } else {
      result.innerHTML = "Please choose a future date.";
      result.style.color = 'red';
    }
  }
}

<form name="myForm" id="myForm">
  <input type="date" id="inputDate" name="inputDate" onchange="getDate()">
</form>
<p id="result"></p>

【讨论】：

"2020-07-17" 将被解析为 UTC，setHours(0,0,0,0,) 将其转移到当地一天的开始，对于那些具有负时区偏移的人来说，这将是前一天。例如。当前 New Your 是 UTC-5，因此“2020-07-17”变为 2020-07-16 19:00 local。将其设置为 0 小时会转移到 2020-07-16 00:00。因此，对于纽约人来说，进入 2020-07-17 将被视为进入 2020-07-16。

【解决方案2】：

function getDate() {
    var givenDate = Date.parse(document.myForm.inputDate.value);
  var todaysDate = new Date();
  if (givenDate >= todaysDate) {
    result.innerHTML = 'Great! You\'re starting on ' + givenDate;
    result.style.color = 'green';
  } else {
    result.innerHTML = "Please choose a future date.";
    result.style.color = 'red';
  }
}

<form name="myForm" id="myForm">
  <input type="date" id="inputDate" name="inputDate" onchange="getDate()">
</form>
<p id="result"></p>

使用 Date.parse

var givenDate = Date.parse(document.myForm.inputDate.value);

【讨论】：