Trying to compare html datetime with current time for conditional formatting

Question

I have a sharepoint discussion list. There's a field called "Last Updated". I'm trying to highlight rows where last updated is greater than 1 hour.

enter image description here

This is what I'm currently trying:

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="https:////cdnjs.cloudflare.com/ajax/libs/moment.js/2.6.0/moment.min.js"></script>
        <script>
            $(document).ready(function(){
                var now = moment().format('l h:mm:ss a');
                console.log(now);

                //$row = $("td .ms-vb2:contains('6/13/2014 9:46 AM')");
                $rows = $("td[id$='WPQ3'] .ms-vb2:contains('AM'), td[id$='WPQ3'] .ms-vb2:contains('PM')");
                console.log($rows);
                $times = $rows.children
                $rows.parent().css("background-color", "rgba(203, 231, 57, 0.37)");

            });         
        </script>
    </head>
</html>

Right now, every cell is highlighted based on my selector.

$rows contains 2 objects and the innerText for both objects contains the time, so something like "6/13/2014 9:46 AM".

I'm not sure how to look at the time for each row, compare it with the now variable and then highlight if my condition is met, which is "Highlight if less than 1 hour difference"

I think you can customize that view and do conditional formatting, if you don't mind going outside the jquery selector stuff. — TheNorthWes, Jun 13 '14 at 16:54
possible duplicate of [JavaScript - Get minutes between two dates](http://stackoverflow.com/questions/7709803/javascript-get-minutes-between-two-dates) — TheNorthWes, Jun 13 '14 at 16:58
@AdmiralAdama I don't mind going outside of Javascript to accomplish this but SharePoint is pretty limited when it comes to conditional formatting based on time. — Batman, Jun 13 '14 at 17:01
Fair enough. I would work on converting the `innerText` into a date object and then walk through some of the comparisons tutorials to get minutes/hour differences between dates w/ jquery/javascript — TheNorthWes, Jun 13 '14 at 17:11

score 0 · Answer 1 · answered Jun 13 '14 at 17:37

I was able to solve this using moment.js and a bit more research into jQuery.

Here's my solution:

        $(document).ready(function(){
            //STORE CURRENT TIME 
            var now = moment() 
            //GET ALL ROWS I'M TRYING TO HIGHLIGHT
            $rows = $("td[id$='WPQ3'] .ms-vb2:contains('AM'), td[id$='WPQ3'] .ms-vb2:contains('PM')");

            //GO THROUGH EACH ROW FOUND
            $.each($rows, function (index, row){

                //FOR EACH ROW CONVERT TIME INTO MOMEMTJS OBJECT
                var lastUpdateTime = moment(row.innerText)

                //USING MOMENT JS, FIND THE DIFFERENCE BETWEEN LAST UPDATE AND NOW
                var difference = now.diff(lastUpdateTime, 'hours');

                //IF THE DIFFERENCE IS LESS THAN AN HOUR HIGHLIGHT THE CURRENT ROWA
                if(difference <= 1){
                    $(this).parent().css("background-color", "rgba(203, 231, 57, 0.37)");
                }
            })
        });

Trying to compare html datetime with current time for conditional formatting

1 Answers1