比较 HTML 表单中 Javascript 中的两个日期答案

【问题标题】：Compare two dates in Javascript from an HTML form比较 HTML 表单中 Javascript 中的两个日期
【发布时间】：2018-11-07 08:50:31
【问题描述】：

刚开始学php，时不时需要一些JS函数。今天就是其中之一。我有一个 HTML 表单，我在其中询问用户的年龄，我想检查他们是否将日期与今天的日期相比较。这是 HTML 代码：

var borndate = document.getElementById("borndate");
var date = new Date()
	 
function comparedate(){
	if (borndate >= date.getFullYear()){
			alert("Looks like you are to young!");
                        return false;
	} else {
		return true;
	}
 }

<div class="form">
    	<form class="login-form" method="POST" action="main.php">
    		<input type="date" id="borndate" name="borndate" required="required"/>
                <input type="submit" value="submit" onclick="comparedate()"/>
    	</form>
    </div>

【问题讨论】：

标签： javascript html date comparison

【解决方案1】：

试试看：

// You were wrong comparing only the year with the full date
var todaysYear = new Date().getFullYear();

var borndate = document.getElementById("borndate");
var form = document.querySelector("form");
// Working with forms we want to catch submit (not click) events
form.addEventListener('submit', comparedate)

function comparedate(evt) {
  // preventing default behavior (form submit in this case)
  evt.preventDefault();

  // here we translate 'string' value back to 'date' & extract year
  var yearOfBirth = new Date(borndate.value).getFullYear()
  // an alternative would be to simply parse the year off the string itself

  if (yearOfBirth >= todaysYear) {
    alert("Looks like you are to young!");
  } else {
    // submitting form programmatically
    form.submit()
  }
}

<div class="form">
  <form class="login-form" method="POST" action="main.php">
    <input type="date" id="borndate" name="borndate" required="required" />
    <input type="submit" class="button" name="button" value="submit" />
  </form>
</div>

【讨论】：

我的表单中实际上有一个提交按钮。我想在有人提交它时启动这个脚本，所以我有：并在函数中，在警报之后我有一个返回错误；如果日期与当前日期相同或大于当前日期，则停止用户转到 main.php。但是它仍然让我转到下一页
点击提交时仍然让我进入 main.php
@TheNoobUser 现在呢？
在 sn-p 上它正在工作，但在我的代码上仍然让我去 main.php，我真的不知道
对不起，我忘了标记你，我只是将你的答案标记为正确，这是我这边的错字。谢谢！

【解决方案2】：

由于变量date 是年份，我假设您只想比较年份。

您的代码将元素本身与年份进行比较。您必须与元素的 value 进行比较。

改变

if (borndate >= date)

到

if (new Date(borndate.value).getFullYear() >= date)

【讨论】：

这行得通吗？我在这方面没有取得太大的成功。您能否发布一些代码来说明如何实现？
啊，我明白了，这是有道理的；新代码似乎可以工作，因为您现在正在从值中获取日期
对我来说不起作用，即使我将出生日期设置为明天，它也会让我加载到 main.php
@TheNoobUser，您要比较完整日期吗？？
刚过年就好了。因为是 2018 年，我选择明天的日期，我有一个 >= 它不应该让我这样做

【解决方案3】：

我倾向于发现库使处理日期变得更加容易，虽然在这里使用一个相对较小的东西可能有点过分，但您可能有兴趣了解这样一个选项是如何工作的：

var test = dateFns;


function comparedate(){
    var borndate = dateFns.parse(document.getElementById("borndate").value);
    var date = dateFns.parse(new Date());
    
    console.dir(date)
    console.dir(borndate)
    
    if (dateFns.isAfter(borndate, date)) {
        alert("Looks like you are to young!");
    } else {
        return true;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.29.0/date_fns.min.js"></script>
<div class="form">
    <form class="login-form" method="POST" action="main.php">
        <input type="date" id="borndate" name="borndate" required="required"/>
    </form>
    <button onclick="comparedate()">Compare</button>
</div>

【讨论】：