Using javascript I need to highlight a row if it is within 14 days of becoming due via due date, and red it if is past due or today

Question

So I have this code that I found here at Stack Exchange that lets me highlight rows based on date:

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function () {

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
        OnPostRender: function (ctx) {

            // get today's date
            var today = new Date();
            // zero out the time portion so we will only compare days
            today.setHours(0, 0, 0, 0);
            var tenDaysAgo = new Date(-864000000);
            tenDaysAgo.setHours(0, 0, 0, 0);

            var rows = ctx.ListData.Row;
            for (var i = 0; i < rows.length; i++) {

                // get the date set in your date YourDateField
                var itemDate = new Date(rows[i]['Due_x0020_Date']);
                // zero out the time portion so we only compare days
                itemDate.setHours(0, 0, 0, 0);

                var rowId = GenerateIIDForListItem(ctx, rows[i]);
                var row = document.getElementById(rowId);

                if (itemDate <= today) {
                    row.style.backgroundColor = '#ED9898';
                }
                if (itemDate >= tenDaysAgo && itemDate > today) {
                    row.style.backgroundColor = 'yellow';
                }
            }
        }
    });
});

The problem I am having is in this line, where I want to check if the due date is within ten days of today.

if (itemDate >= tenDaysAgo && itemDate >today ) {
    row.style.backgroundColor = 'yellow';
}

Everything is working except this line, which basically looks at the due date and if it is less than today, it highlights it in yellow. I am at wits end trying to figure this out. I really hope someone here can help with this. I am using a script editor below the list, if that matters. I am very new to javascript. We are using sharepoint online, but I can't use JSON because we are using the classic view on this site.

Answer 1

Tried your code and it seems to be working fine. Try checking the errors in the console. There might be some clue there.

Also, for a great JSLink experience, try the Cisar Chrome extension by Andrei Makeev that helps you develop these CSR customizations. More about Cesar here.

Answer 2

Not sure why but your way of calculating the past date is not working for me, see this:

Maybe you are facing the same issue. Check if you are getting correct value in a variable by debugging. else use below code to get the past date:

var d = new Date();
d.setDate(d.getDate() - 10);
console.log(d.toString());

Source: JavaScript: how to calculate the date that is 2 days ago?

Also check your conditions in if block. Those does not match with your question title (within 14 days?) & the question description (within ten days).

---

Similar questions based on CSR:

1. How to highlight the row in red if expiration date is passed for SharePoint 2013 list
2. How to color code a SharePoint list date field based on comparison with todays date?