JavaScript日期验证：限制输入日期不小于当前日期

结果与目标

最终实现的效果是：当用户在输入框中选择或填写了一个早于系统当前日期的时间时，系统自动弹出警告并将输入值重置为今日；若涉及完工日期对比，则需保证完工日期不早于动工日期。

准备条件

本方案依赖以下基础环境：

• HTML 页面中包含用于选择日期的输入框（如 #beginTime 和 #endTime）。
• 引入 jQuary 库以简化 DOM 操作与事件绑定。
• 浏览器支持标准的 Date 对象方法。

真实操作顺序

第1步：定义日期格式化辅助函数

目的：统一输出 YYYY-M-D 格式的字符串，便于赋值给输入框。

动作：创建 getDateStr(date) 函数，提取年、月、日并拼接。注意月份通常从0开始计数，因此需 +1。

function getDateStr(date) {
  var month = date.getMonth() + 1;
  var strDate = date.getFullYear() + '-' + month + '-' + date.getDate();
  return strDate;
}

第2步：初始化页面并设置默认值

目的：页面加载时，自动将起止日期输入框的值设置为当天日期，减少用户操作。

入口：$(document).ready() 或简写为 $(function(){...})。

参数与逻辑：获取当前时间 new Date()，调用格式化函数后分别赋值给 #beginTime 和 #endTime。

$(function () {
  var d = new Date();
  var strDate = getDateStr(d);
  $("#beginTime").val(strDate);
  $("#endTime").val(strDate);
});

第3步：配置起止日期变更监听

目的：当用户修改了起始日期（动工日期）时，立即校验是否合法。

动作：使用 .change() 事件监听器。读取输入框的值并转换为 Date 对象 d2，与当前时间 d 进行比较。

判断标准：如果 d2 < d，说明输入的是过去的时间。此时执行 alert 提示用户，并强制将输入框值重置为格式化后的当日时间 strDate。

$("#beginTime").change(function () {
  var d2 = new Date($("#beginTime").val());
  if (d2 < d) {
    alert("填写的动工日期必须大于当前日期.");
    $("#beginTime").val(strDate);
  }
});

第4步：配置完工日期校验逻辑

目的：确保完工日期（ endTime ）不早于已设定的动工日期（ beginTime ）。

动作：监听 #endTime 的变更。分别获取 #beginTime 对应的日期对象 d2 和 #endTime 对应的日期对象 d3。

判断标准：如果 d3 < d2，提示错误并将完工日期重置为动工日期的格式化字符串。

$("#endTime").change(function () {
  var d2 = new Date($("#beginTime").val());
  var d3 = new Date($("#endTime").val());
  if (d3 < d2) {
    alert("填写的完工日期不能小于动工日期.");
    $("#endTime").val(getDateStr(d2));
  }
});

简要总结

通过上述步骤，我们实现了一个简单的前端日期校验流程。核心在于利用原生 Date 对象的比较特性，配合 jQuery 的事件机制进行实时干预。这种方式能有效防止非法时间提交至服务器，适合大多数基于 Web 的项目场景。以上就是JavaScript日期验证之输入日期大于等于当前日期的详细内容，更多关于JavaScript日期校验的技巧资料请关注本站其它相关文章！