Как сравнить два ввода типа datetime перед отправкой

Question

Я работаю над веб-проектом, используя j2ee. во всяком случае, на моей странице jsp у меня есть форма, содержащая два входа типа datetime-local, и один из них должен быть больше, чем другой, это похоже на проверку начала и конца datetimes, поэтому я не знаю, как выполнить этот тест раньше отправив. Я пробовал код javascript в кнопке отправки onclick, я попытался сделать поле ввода второй даты пустым, если оно ниже другого, но оно не работает. Может кто-нибудь мне помочь?

моя форма в 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> 

Answer 1

Я использую библиотеку Moment.js недавно, что поддерживает сравнение разницы между датами на это Docs page.

Пример:

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

Вы должны быть осторожны при разборе DateTimes в JavaScript, как браузеры не всегда интерпретируют раз, когда один и тот же путь.

Answer 2

В вашем javascript было несколько неправильных вещей, которые препятствовали правильной работе вашей проверки формы. Давайте рассмотрим шаги, чтобы исправить это, а затем просмотреть jsfiddle ссылку ниже для примера:

1. Ваши JQuery селекторы не целились фактические входы, как ваши даты входы не имеют идентификатор (#) вы настроили таргетинг, поэтому вместо этого я изменил селектор, чтобы найти входы по имени.
2. Ваш атрибут onclick в теге submit должен быть абстрагирован, чтобы включать только функцию, а фактическая логика должна идти в соседнем теге скрипта под формой.
   3. Теперь, когда он работает, и поскольку у вас есть атрибуты (имейте в виду, что поддерживаются 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 Изменена форма представляет элемент формы, как и другие теги формы может вызвать представить в форме.

Вот jsfiddle.