将输入类型日期与当前日期进行比较

Posted 2023-03-12

【中文标题】将输入类型日期与当前日期进行比较

【英文标题】：Comparing input type date with current date

【发布时间】：2017-10-03 10:36:29

【问题描述】：

<input type="date" name="bday" id="biday" required>

我必须从用户的输入类型日期字段中获取日期，如果输入的日期大于当前日期，我必须在警报框中打印一些错误。我尝试了各种方法，但没有一个适用于输入类型日期。我尝试使用两个变量，一个存储当前日期，第二个获取日期输入元素的值 `

var startDate = Date(document.getElementByID('biday').value);
    var today = new Date();
    if (startDate > today) 
        alert("The first date is after the second date!");

`。有人可以帮我完成任务的程序吗？

【问题讨论】：

向我们展示您的一些方法，否则我们将无法为您提供帮助

startDate.getTime() > new Date().getTime()

@AndrzejSmyk 添加了我的方法。

@Daniel 感谢您的建议，但我试过了，但其他任何方法都行不通？

【参考方案1】：

getElementByID 有一个小错误，应该是 getElementById

还可以将日期字符串作为 mysql 格式 'YYYY-MM-DD' 进行比较，因此您实际上可以直接将两个值作为字符串进行比较。

 '2017-12-1' < '2017-12-3'
 // true

如果您使用其他格式进行操作，您可以创建一个新的日期对象并将其解析为时间戳，如下所示：

// Receives a date String or Object
// and returns the aprox TimeStamp
function valueifyDate(date)
    if(typeof date == 'object')
    return date.getTime();
  else
    return new Date(date).getTime();
   


var bday = document.getElementById('birthday');
bday.addEventListener("change", function(e)
  var today = new Date();
  if(valueifyDate(today) < valueifyDate(e.target.value))
    console.log("younger than today");
  
)

https://jsfiddle.net/jbnLx3v3/

【参考方案2】：

这是另一种方式。

HTML

 <input type="date" id="dval" value="" />
 <button onclick="test()">TEsting</button>

JS

 function test() 
     var q = new Date();
     var date = new Date(q.getFullYear(),q.getMonth(),q.getDate());
     var mydate = new Date(document.getElementById('dval').value);

     if(date > mydate) 
        alert("Current Date is Greater THan the User Date");
      else 
        alert("Current Date is Less than the User Date");
     
  

DEMO

注意： Firefox 或 Internet Explorer 11 及更早版本不支持 type="date"。

【讨论】：

如果从 q 创建 date 的目的只是将时间归零，那么 q.setHours(0,0,0,0) 就可以了。但是 mydate 将基于 UTC，因此会因用户的时区偏移而有所不同，从而导致格林威治以西的用户出现意外行为。

【参考方案3】：

要检查startDate 中是否有日期，最好使用Date.parse（在Date 构造函数中隐式使用）并比较检查它是否不是NaN。如前所述，您需要使用today.getTime() 获取与时间对应的数值。然后你可以比较解析的startDate和today.getTime()。它也应该是getElementById 而不是getElementByID。请参阅下面的更正代码：

function compareDates() 
  var startDate = Date.parse(document.getElementById('biday').value);
  var today = new Date();
  if (!isNaN(startDate) && startDate > today.getTime()) 
    alert("The first date is after the second date!");
  

<input type="date" name="bday" id="biday" required onchange='compareDates()'>

【讨论】：

如果您期望特定格式，则使用内置解析器是验证日期字符串的最糟糕方法。在支持日期输入类型的情况下，该值将是 ISO 8601 格式的字符串，在使用内置解析器时会出现其他问题。

请提供示例或链接，以解释为什么Date.parser 不是最佳选择

参见Why does Date.parse give incorrect results? 或read the specification：解析除ISO 8601 扩展格式以外的任何格式都取决于实现。甚至对 ISO 8601 格式日期的解析也被指定为与 ECMA-262 应该支持的标准不一致。

【参考方案4】：

您的代码中有很多错误，例如 getElementByID 应该是 getElementById 并且您没有从输入中获取 value 等等。查看下面的 sn-p 以供参考。

function checkDate() 

  var startDate = new Date(document.getElementById('biday').value);
  var today = new Date();
  if (startDate.getTime() > today.getTime()) 
    alert("The first date is after the second date!");
    

<input type="date" name="bday" id="biday" required>
<input type="submit" value="check" onclick="checkDate()">

【讨论】：

谢谢，没有意识到缺少价值。谢谢它的工作。

从日期输入返回的值将被格式化为 YYYY-MM-DD。这将由内置解析器解析为 UTC，这可能不是 OP 所期望的。对于格林威治以西的用户，startDate.getTime() > today.getTime() 经常为真，即使 startDate 为“今天”。