如何在提交前比较两种类型的datetime输入

I am working on a web project using j2ee. anyway, in my jsp page I have a form containing two inputs of type datetime-local, and one of them must be greater than the other,it's like validating start and end datetimes, so I don't know how to make this test before submitting..I tried a javascript code in submit button onclick, I tried to make the input field of the second date empty if it is lower than the other,but it doesn't work. can anyone help me?

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

my form in jsp page

我在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>

2 个解决方案

#1

I've been using the Moment.js library recently, which supports comparison of the difference between dates on it's Docs page.

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

Example:

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

You do need to be careful when parsing DateTimes in javascript as browsers don't always interpret time the same way.

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

#2

There were a couple small things wrong with your javascript that prevented your form validation from working correctly. Let's go over the steps to fix this, and then view the jsfiddle link below for the example:

您的javascript有一些小错误导致您的表单验证无法正常工作。让我们回顾一下修复此问题的步骤,然后查看下面的jsfiddle链接以获取示例:

Your jquery selectors weren't targeting the actual inputs, as your date inputs didn't have the id (#) you were targeting, so instead, I changed the selectors to find the inputs by name.

您的jquery选择器未定位实际输入,因为您的日期输入没有您要定位的ID(#),因此我更改了选择器以按名称查找输入。

Your onclick attribute on the submit tag should be abstracted to only include a function, and the actual logic should go in a nearby script tag below the form.
1. Now that it's working and since you have the required attributes (keep in mind are HTML5 supported) on the date inputs, you shouldn't have to check if the values exist, but you can return false to prevent the form from submitting when 1 value is greater than the other.

应该将提交标记上的onclick属性抽象为仅包含一个函数,并且实际逻辑应该放在表单下面的附近脚本标记中。既然它正在工作,并且由于您在日期输入中具有所需的属性(请记住支持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>

Update Changed the form submit to the form element as other form tags could trigger a submit on the form.

更新将表单提交更改为表单元素,因为其他表单标记可以触发表单上的提交。

Here's the jsfiddle.

这是jsfiddle。

#1