Jquery or Javascript - validate if current date is greater than due date

Question

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, ie 03/07/2015 23:15). I was asked to find a way to highlight a TR cell when the due date time is coming 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?

Answer 1

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

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

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

Answer 3

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

You can compare Date as simple as you can compare Numbers. Since that is a very easy use case, you can simply convert the users input to Date objects and compare 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
}

Answer 5

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