Conditional Formatting with date comparison

Question

I am using SharePoint 2016 on Premise in the classic mode.

I have a Custom List, and I want to apply conditional formatting to a date column, so that if the date is overdue from today's date it will display red and so on.

I've tried a few different JSON scripts, however they don't seem to work. Any help would be appreciated.

Answer 1

As you are using SharePoint 2016 classic experience, you can use Client Side Rendering (CSR) AKA JSLink which represents a rendering engine for list views, list forms and search results.

Below is sample code for your reference:

<script type="text/javascript">
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 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]['ContractExpirationDate']);
                // 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 (row!=null&&itemDate <= today) {                  
                    row.style.backgroundColor = '#FF0000';                  
                }
            }
        }
    });
});
</script>

For more information, check below references:

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