如何使用 JavaScript\JQuery 检查一个日期是否早于另一个日期？

Question

我是 JavaScript 开发的新手，我必须执行以下任务：我有 2 个 input 标记，其中包含 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强>)。

我正在尝试做这样的事情：

1. JavaScript 在数据更改的 onchange 事件中调用并获取 dataA 字符串（tha 表示 dateTo 日期）并检查它是否在 dataA 之前（dateTo 日期） .

2. 如果之前的检查为真，则日期范围无效，因此脚本会显示错误弹出消息并禁止提交具有 id="dataDaAForm" 的表单

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

但是我真的不知道要完成这个 JavaScript，我不知道它是否存在更好的解决方案来完成这个任务。

Answer 1

很简单，Date实例可以直接比较。

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

当您比较两个Date 实例，或减去一个实例时，valueOf 方法将在内部调用，该方法将实例转换为时间戳（精确到毫秒）。

Answer 2

这将起作用：

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

如果date2 稍后返回true，否则返回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>

如果你愿意，我也制作了a fiddle。

延伸阅读：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

Answer 3

如果您只需要比较日期而不需要时间，请使用：

// convert date format to "YYYY-MM-DD"
var a = new Date().toJSON().slice(0, 10)
// get date from input field, by default is "YYYY-MM-DD" format
var b = document.getElementById('datePicker').value

// compare
console.log(a == b)
console.log(a > b)
console.log(a < b)

<input id="datePicker" type="date" />