I have a site where users enter their tasks for the day and they are obligated to enter a due date and time (in this format: MM/DD/YYYY HH:MM, i.e. 03/07/2015 23:15). I was asked to find a way to highlight a TR cell when the due date time is ing up and when it's past due.

Example:
Highlight a TR in orange if the due date time is due in 15 mins.
Highlight a TR in red if the due date time has passed already.

So far, I've managed to find a way to get the current time using something like below:

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

What I need help with is creating the logic to say if current_time > due_date_time then highlight red or if due_date_time is due in 15 minutes then highlight orange. How can I do this?

I have a site where users enter their tasks for the day and they are obligated to enter a due date and time (in this format: MM/DD/YYYY HH:MM, i.e. 03/07/2015 23:15). I was asked to find a way to highlight a TR cell when the due date time is ing up and when it's past due.

Example:
Highlight a TR in orange if the due date time is due in 15 mins.
Highlight a TR in red if the due date time has passed already.

So far, I've managed to find a way to get the current time using something like below:

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

What I need help with is creating the logic to say if current_time > due_date_time then highlight red or if due_date_time is due in 15 minutes then highlight orange. How can I do this?

• javascript
• jquery
• html

• How is the "due date" data saved in your code? – Eyal Commented Mar 8, 2015 at 5:30
• 1 Fixed typos, Fixed formatting, Touched up grammar. Don't forget to include an actual question! – Alex K Commented Mar 8, 2015 at 5:40

5 Answers 5

You can use the following jQuery for the purpose.

$('#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/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');
        }
    }
});

Basically here is what is happening:

• Go through each td in the table.
• Get the text from td and convert it to date.
• Check if the date is less than 15 minutes from now.
• If it is less than 15 minutes, then apply min15 class to tr.
• Else check if the date is older than now.
• If it is old, then add old class to the tr.

jQuery is only being used to loop through each td, and to apply css classes easily. If you're not using jQuery anywhere else in your code, you could change it to vanilla JS.

Here is the jsFiddle for the same

I use moment.js for interacting with dates. It makes this kind of thing trivial:

// 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) pares 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./downloads/moment.min.js"></script>
<script src="https://ajax.googleapis./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>

Try

$("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./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>

You can pare Date as simple as you can pare Numbers. Since that is a very easy use case, you can simply convert the users input to Date objects and pare them instead of using moment.js:

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

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

This will always work with full accuracy. Logic is to calculate difference in miliseconds and then get difference in minutes.

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