jQuery或Javascript-验证当前日期是否大于到期日

Question

我有一个网站，用户在其中输入当天的任务，他们有义务输入到期日期和时间（格式为：MM / DD / YYYY HH：MM，即2015年7月7日23:15）。 我被要求找到一种方法，以在到期日时间快到到期日时高亮显示TR单元格。

例：
如果到期日期时间为15分钟，则以橙色突出显示TR。
如果截止日期时间已经过去，则以红色突出显示TR。

到目前为止，我已经设法找到一种使用以下方法获取当前时间的方法：

jQuery(document).ready(function($) {
    var dNow = new Date();
    var current_time = ("0" + (dNow.getMonth()+1)).slice(-2) + '/' + ("0" + dNow.getDate()).slice(-2) + '/' + dNow.getFullYear() + ' ' + ("0" + dNow.getHours()).slice(-2) + ':' + ("0" + dNow.getMinutes()).slice(-2);
alert(current_time);    
 });

我需要帮助的是创建逻辑，以说出current_time> due_date_time然后高亮显示红色，或者due_date_time是15分钟内到期，然后高亮显示橙色。 我怎样才能做到这一点？

Answer 1

我使用moment.js与日期进行交互。 它使这种事情变得微不足道：

 // this line just sets the due date on the second row // to 10 minutes from the current time so this demo will always work // you dont need this line in your code $('#myTable').find('tr').eq(2).find('td').eq(1).html( moment().add(10, 'minutes').format('L HH:mm') ); // loop through each row of the table $('#myTable').find('tr').each(function(){ // get the cell with the date in it var cell = $(this).find('td').eq(1); var dueDate = $(cell).html(); // create a moment object from the entered time dueDate = moment( dueDate ); // in the below line moment() creates a new moment object form the current date time // much like new Date() // .isAfter(dueDate) compares the current time to the due date var isLate = moment().isAfter(dueDate); // returns true or false if(isLate){ //$(cell).addClass('late'); // highlights just the cell $(cell).parent().addClass('late'); // highlights the whole row } // get the current time then add 15 minutes var nowPlus15Mins = moment().add(15, 'minutes') // check if that time will be after the duedate var isSoon = nowPlus15Mins.isAfter(dueDate); // returns true or false // if its not late now, but will be in 15 minutes, highlight td if(!isLate && isSoon){ //$(cell).addClass('soon'); // highlights just the cell $(cell).parent().addClass('soon'); // highlights the whole row } }); 

 .late{ background-color:red; } .soon{ background-color:orange; } 

 <script src="http://momentjs.com/downloads/moment.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="myTable" width="600" border="1"> <tbody> <tr> <th scope="col">Column 1</th> <th scope="col">Column 2</th> </tr> <tr> <td>Due Date</td> <td>03/07/2015 23:15</td> </tr> <tr> <td>Due Date</td> <td>03/15/2015 23:15</td> </tr> </tbody> </table> 

Answer 2

您可以为此使用以下jQuery。

$('#timeTable tr td').each(function () {
    var dtTd = new Date($(this).html());
    var dtNew = new Date();
    // 15 minutes is 900000 milliseconds
    // getTime() doc - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime
    if (dtTd.getTime() - dtNew.getTime() < 900000 && dtNew < dtTd) {
        $(this).parent('tr').addClass('min15');
    } else {
        if (dtNew > dtTd) {
            $(this).parent('tr').addClass('old');
        }
    }
});

基本上，这是正在发生的事情：

• 浏览表中的每个td。
• 从td获取文本并将其转换为日期。
• 检查日期是否从现在开始少于15分钟。
• 如果少于15分钟，则将min15 class应用于tr 。
• 否则检查日期是否早于现在。
• 如果它是旧的，则将old类添加到tr 。

jQuery仅用于遍历每个td，并轻松应用CSS类。 如果您不在代码中的其他任何地方使用jQuery，则可以将其更改为Vanilla JS。

这是相同的jsFiddle

Answer 3

尝试

 $("table tbody tr td").map(function(i, el) { var due = 900000; // 15 minutes return $(this).css("backgroundColor", new Date($(this).text()).getTime() < $.now() // past due ? "red" // past due : new Date($(this).text()).getTime() < $.now() + due // due within 15 minutes ? "orange" // due within 15 minutes : "unset" // due beyond 15 minutes ) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <table> <tbody> <tr> <td>03/08/2015 12:15:00</td> </tr> <tr> <td>03/08/2015 12:30:00</td> </tr> <tr> <td>03/08/2015 12:45:00</td> </tr> </tbody> </table> 

Answer 4

您可以像比较数字一样简单地比较日期 。 由于这是一个非常简单的用例，因此您可以简单地将用户输入转换为Date对象并进行比较，而无需使用moment.js：

var due = new Date('03/07/2015 23:15'),
    now = new Date();

if(now > due) {
    // Due date is already exceeded
}

Answer 5

这将始终以完全正确的方式工作。 逻辑是以毫秒为单位计算差异，然后以分钟为单位计算差异。

function CalculateDueDate(element){
    var message = '';
    var DueDt = new Date(DueDate);
    var Today = new Date();
    var MilliSecondDifference = Today - DueDt;
    var DifferencePerMinute = 1000 * 60 * 24 * 365.26;
    var MinutesDiff = MilliSecondDifference / DifferencePerMinute;

    if (MinutesDiff > 15){
        //Do what ever - 15 mins passed
    }
    else{
        //Do what ever - with in 15 mins
    }
}