如何使用JavaScript\JQuery检查一个日期是否在另一个日期之前？

Question

我在JavaScript开发是绝对新的,我必须执行以下任务:我有2个输入包含表示形式日期2字符串标记2014年1月12日(日/月/年).我使用此输入标记来搜索具有这些日期之间的日期字段的对象.

<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();
}

我需要的是防止里面的值数据A(中英文dateTo)方法的输入是以前的那个dataDa值(以英语dateFrom).

我想做这样的事情:

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

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

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

Bue我真的不知道完成这个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);
}

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>

如果你愿意,我也做了一个小提琴.

进一步阅读: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" />