Как проверить, была ли одна дата до другой даты с использованием JavaScript\JQuery?

Я абсолютно новичок в разработке JavaScript, и мне нужно выполнить следующую задачу: у меня есть тег << → , содержащий 2 строки, представляющие дату в форме 01/12/2014 (ДЕНЬ/МЕСЯЦ/ГОД). Я использую этот тег ввода для поиска объектов, у которых есть поле даты, которое входит в число этих дат.

<input type="hidden" size="9" class="impPrfTot" readonly="readonly"
                                           onchange="cambioDataDa(this.value)"
                                           name="dataDa" id="datada" value="<%=request.getSession().getAttribute("dataDa")%>"
                                           style="font-size: 11px;color: #000000;">

<input type="hidden" size="9" class="impPrfTot" readonly="readonly"
                                           onchange="cambioDataA(this.value); checkData(this.value)"
                                           name="dataA" id="dataa" value="<%=request.getSession().getAttribute("dataA")%>"
                                           style="font-size: 11px;color: #000000;">

<button class="dataDadataAButton" name="submitdataDadataA" onclick="sottomettiFormDataDaA(this)">Cerca</button>

И наконец, у меня есть кнопка , используемая для отправки этой формы с помощью этого JavaScript:

function sottomettiFormDataDaA(obj) {
    document.getElementById('dataDaAForm').submit();
}

Мне нужно предотвратить, чтобы значение внутри dataA (на английском языке dateTo) было ранее, чем dataDa (на английском языке dateFrom strong > ).

Я пытаюсь сделать что-то вроде этого:

  • JavaScript вызывается в событии onchange при изменении данных и берет строку dataA (та, которая представляет дату date), и проверяет, является ли она предыдущей из данныхA ( дата на дату).

  • Если предыдущая проверка верна, диапазон дат недействителен, поэтому script показывает всплывающее сообщение об ошибке и запрещает отправку формы с идентификатором id = "dataDaAForm"

    function checkData(dataA) {
        dataDa = document.getElementById('dataDa').value;
    
        if(dataDa > dataA){
            // SHOW A POPUP ERROR MESSAGE
            // DISALLOW THE FORM SUBMIT
        }
    }
    

Bue Я действительно не знаю, как завершить этот JavaScript, и я не знаю, что это лучшее решение для решения этой задачи.

Ответ 1

Очень простой экземпляр Date можно сравнивать напрямую.

function compareTime(time1, time2) {
    return new Date(time1) > new Date(time2); // true if time1 is later
}

Когда вы сравниваете два экземпляра Date или минус один, метод valueOf будет вызван внутри, который преобразует экземпляр в метку времени (миллисекунда точная).

Ответ 2

Это будет работать:

function dateCompare(date1, date2){
    return new Date(date2) > new Date(date1);
}

Возвращает true, если date2 позже, false в противном случае. Вызовите с помощью dateCompare('01/12/2014', '02/24/2014').

function dateCompare(date1, date2){
    return new Date(date2) > new Date(date1);
}

// Demo (uses jQuery)

$("tbody tr").each(function(){
    $tr = $(this);
    $td = $tr.children('td');
    date1 = $td.eq(0).text();
    date2 = $td.eq(1).text();
    result = dateCompare(date1,date2);
    $td.eq(2).text(result);
    if($td.eq(2).text() == $td.eq(3).text()) $tr.css('background','green');
    else $tr.css('background','red');
});
table{
    border-collapse: collapse;
}
td{
    padding: 5px;
    border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
    <thead>
        <tr>
            <td>date1</td>
            <td>date2</td>
            <td>Result</td>
            <td>Expected</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>01/12/2014</td>
            <td>02/24/2014</td>
            <td></td>
            <td>true</td>
        </tr>
        <tr>
            <td>01/12/2013</td>
            <td>02/24/2012</td>
            <td></td>
            <td>false</td>
        </tr>
        <tr>
            <td>01/12/2014</td>
            <td>02/24/2018</td>
            <td></td>
            <td>true</td>
        </tr>
        <tr>
            <td>01/12/2015</td>
            <td>02/24/2011</td>
            <td></td>
            <td>false</td>
        </tr>
    </tbody>
</table>