如何在提交之前比较两个日期时间类型的输入

how to compare two input of type datetime before submitting

本文关键字：日期 两个 时间 类型 输入 提交 比较      更新时间：2023-09-26

我正在使用j2ee开发一个Web项目。 无论如何，在我的jsp页面中，我有一个表单，其中包含两个类型为datetime-local的输入，其中一个必须大于另一个，这就像验证开始和结束日期时间，所以我不知道如何在提交之前进行此测试。我在点击时在提交按钮中尝试了 javascript 代码，如果第二个日期的输入字段低于另一个，我试图将第二个日期的输入字段设为空，但它不起作用。谁能帮我？

我在JSP页面中的表单

<form id="tab" action="AjouterMCorr" method="GET">
    <div class="form-group">
        <label>Date Panne</label>
        <input required type="datetime-local" name="datePanne" class="form-control">
    </div>
    <div class="form-group">
        <label>Date Maintenance </label>
        <input required type="datetime-local" name="dateMaint" class="form-control">
    </div>
    <div class="btn-toolbar list-toolbar">
        <button onclick="
             var dateMaint = new Date($('#dateMaint').val()); // or Date.parse(...)
            var datePanne = new Date($('#datePanne').val()); // or Date.now()
             if( dateMaint.getTime() < datePanne.getTime() )
                 {
                 document.getElementById('#dateMaint').value = '';
                  }
           " type="submit" class="btn btn-primary"><i class="fa fa-save"></i> Save</button>
        <input type="reset" class="btn btn-danger">
    </div>
</form>

我最近一直在使用 Moment.js 库，它支持比较其文档页面上日期之间的差异。

例：

var start = moment($('dateMaint').val(), 'MM-DD-YYYY');
var end = moment($('datePanne').val(), 'MM-DD-YYYY');
if (end.isBefore(start)) { //stuff... }

在javascript中解析DateTimes时，你确实需要小心，因为浏览器并不总是以相同的方式解释时间。

你的javascript有几个小问题，阻止了你的表单验证正常工作。让我们回顾一下解决此问题的步骤，然后查看下面的jsfiddle链接以获取示例：

  1. 您的 jquery 选择器没有针对实际输入，因为您的日期输入没有您要定位的 id （#），因此我更改了选择器以按名称查找输入。
  2. 提交标记上的 onclick 属性应抽象为仅包含函数，实际逻辑应位于表单下方的附近脚本标记中。
    1. 现在它正在工作，并且由于您在日期输入上具有必需的属性（请记住是否支持 HTML5），因此您不必检查值是否存在，但您可以返回 false 以防止表单在 1 个值大于另一个值时提交。

.HTML 

    <form id="tab" action="AjouterMCorr" method="GET">
  <div class="form-group">
    <label>Date Panne</label>
    <input required type="datetime-local" name="datePanne" class="form-control">
  </div>
  <div class="form-group">
    <label>Date Maintenance </label>
    <input required type="datetime-local" name="dateMaint" class="form-control">
  </div>
  <div class="btn-toolbar list-toolbar">
    <button onclick="onSubmit()" type="submit" class="btn btn-primary"><i class="fa fa-save"></i> Save</button>
    <input type="reset" class="btn btn-danger">
  </div>
</form>
<script>
  function onSubmit() {
    var dateMaint = new Date($('input[name="dateMaint"]').val()); // or Date.parse(...)
    var datePanne = new Date($('input[name="datePanne"]').val()); // or Date.now()
    if (dateMaint.getTime() < datePanne.getTime()) {
      return false;
      console.log("test");
    }
  }
</script>

更新已将表单提交更改为表单元素，因为其他表单标签可能会触发表单上的提交。

这是jsfiddle。

相关文章：