Skip to main content
added 22 characters in body
Source Link
Denis Molodtsov
  • 9.8k
  • 10
  • 46
  • 96
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=newtenDaysAgo = 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> today) {
                    row.style.backgroundColor = 'yellow';
                }
            }
        }
    });
});

}); });

    if (itemDate >= tenDaysAgo && itemDate >today ) {
            row.style.backgroundColor = 'yellow';
        }
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';
        }
    }
}

}); });

    if (itemDate >= tenDaysAgo && itemDate >today ) {
            row.style.backgroundColor = 'yellow';
        }
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';
                }
            }
        }
    });
});
if (itemDate >= tenDaysAgo && itemDate >today ) {
    row.style.backgroundColor = 'yellow';
}
Source Link
Mike
  • 11
  • 2

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

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.