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＆gt; 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课程应用于tr。
否则，请检查日期是否比现在更早。
如果已旧，请将old课程添加到tr。

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

Here is the jsFiddle for the same

Answer 3

尝试

＆＃13;

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

＆＃13;

<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>

＆＃13;

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
    }
}

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

5 个答案: