在不提交表单的情况下检查日期是否过去答案

【问题标题】：Check if date is in the past without submitting form在不提交表单的情况下检查日期是否过去
【发布时间】：2014-12-31 00:15:17
【问题描述】：

我有这段代码，我想检查某个日期是否过去。我想在输入日期后，在提交表单之前检查它。

<input id="datepicker" onchange="checkDate()" required class="datepicker-input" type="text" data-date-format="yyyy-mm-dd" >

<script type="text/javascript">
 function checkDate() {
   var selectedDate = document.getElementById('datepicker').value;
   var now = new Date();
   if (selectedDate < now) {
    alert("Date must be in the future");
   }
 }
</script>

这不起作用，如果我输入过去的日期（例如 2014-12-03），它不会显示警报。

【问题讨论】：

因为字符串不是日期。
输入是这种格式，虽然 yyyy-mm-dd
这仍然是一个字符串，而不是一个日期。输入值不是日期对象。
哦，好的。我怎样才能转换它？
您是否考虑过时区，顺便说一句，或者只是用户可以出于任何原因更改其操作系统时钟这一事实？ :)

标签： javascript jquery validation date

【解决方案1】：

您需要做的就是使用日期构造函数new Date("2014-06-12") 将<input> 生成的字符串转换为日期

 function checkDate() {
   var selectedText = document.getElementById('datepicker').value;
   var selectedDate = new Date(selectedText);
   var now = new Date();
   if (selectedDate < now) {
    alert("Date must be in the future");
   }
 }

&lt;input id="datepicker" onchange="checkDate()" required class="datepicker-input" type="date" data-date-format="yyyy-mm-dd" &gt;

【讨论】：

它不工作。但似乎问题是另一回事。即使我这样做： $("#datepicker").change(function() { alert( "test" ); });警报不显示
它对我有用吗？尝试在框中输入 2014-06-12 并回车（您需要按回车或更改控件的焦点才能触发 onchange 事件）
啊好的。我删除了日期选择器插件，它工作。如何使用日期选择器插件使其工作
如果你想使用一个日期选择器插件，使用jQuery UI的那个，然后你可以设置minDate和maxDate来代替你自己的验证函数。见this example
现在添加.setHours(0,0,0,0);这样您就不会收到今天日期的警报

【解决方案2】：

date() 函数返回一个字符串。尝试先使用Date.parse() 函数将两个日期都转换为整数：

<input id="datepicker" onchange="checkDate()" required class="datepicker-input" type="text" data-date-format="yyyy-mm-dd" >

<script type="text/javascript">
   function checkDate() {
       var selectedDate = document.getElementById('datepicker').value;
       var now = new Date();
       var dt1 = Date.parse(now),
       dt2 = Date.parse(selectedDate);
       if (dt2 < dt1) {
            alert("Date must be in the future");
       }
 }
</script>

【讨论】：

看来问题是别的，因为即使我这样做： $("#datepicker").change(function() { alert( "test" ); });警报不显示
我建议您查看浏览器的控制台；你可能在别处有错误

【解决方案3】：

对于那些使用 type="date"（HTML5 引入）而不是 type="text" 的人，可以这样做：

 function checkDate() {
   var date = this.value;
   if(date.valueAsDate <= new Date()) {
       //Date in the past
   } else {
       //Date in the future
   }
}

【讨论】：

【解决方案4】：

你的代码真的很接近，试试这个吧：

var selectedDate = $('#datepicker').datepicker('getDate');
var now = new Date();
if (selectedDate < now) {
  // selected date is in the past
}

【讨论】：

请尝试使用getTime函数比较日期... if (selectedDate.getTime()
据我所知，该解决方案取决于安装 jQuery UI。它基本上是将您的输入字段转换为日期选择器小部件。它会起作用，但完全没有必要。

【解决方案5】：

简单的矿山功能工作......

function check_not_past_date_time(enter_date) {
    var a =new Date(enter_date);
    var now =new Date();
    if(a>now){
        return true;
    }else {
        return false;
    }
}

【讨论】：

【解决方案6】：

你可以使用


_isDate1LowerThanDate2(date1, date2) {
    return new Date(date1) < new Date(date2);
  }

【讨论】：

解释为什么你认为这样的对象比较会起作用。你试过了吗？

【解决方案7】：

在比较日期之前，应将它们设置为 0 小时。这将确保它们之间的差异是 1 天的倍数。

const isPastDate = (date) => {
    const specificDate = new Date(date).setHours(0, 0, 0, 0);
    const today = new Date().setHours(0, 0, 0, 0);
    return specificDate < today;
}

console.log(isPastDate("2021-08-10T23:59:00"));

【讨论】：