Jquery 或 Javascript - 验证当前日期是否大于截止日期

Question

我有一个网站，用户可以在其中输入当天的任务，并且他们有义务输入截止日期和时间（格式为：MM/DD/YYYY HH:MM，即 03/07/2015 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

您可以使用以下 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 类应用到 tr。
• 另外检查日期是否早于现在。
• 如果它是旧的，则将old 类添加到tr。

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

Here is the jsFiddle for the same

Answer 2

我使用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 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。由于这是一个非常简单的用例，您可以简单地将用户输入转换为 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
    }
}