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

        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.

  • When you say it does not work, what do you mean? I have tried your code and it seems to be working Apr 27, 2021 at 14:20

2 Answers 2


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.

enter image description here


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

enter image description here

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

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?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.