Color code due date field if 6 months before current date

Question

I have this specific requirement to color code the due date field if it's value is less than 180 days (6 months) compared to today's date.

Is this possible with Javascript/JSLink ?

Thanks

Answer 1

Yes absolutely. Here's a quick code example that I mostly borrowed from here:

(function () {
    var statusFieldCtx = {};

    statusFieldCtx.Templates = {};
    statusFieldCtx.Templates.Fields = {
        "DueDate": {
            "View": ColorCodeDueDate
            }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(statusFieldCtx);
})();

function ColorCodeDueDate(ctx) {
    var dueDate = new Date(ctx.CurrentItem.DueDate);

    var now = new Date();
    var then = new Date();
    then.setDate(now.getDate() + 180);

    // if there's no due date don't render anything
    if (dueDate == 'undefined' || !dueDate) {
        return '';
    }
    else if (dueDate >= now && dueDate <= then) { // we are within 180 days
        return "<div style='background-color:red;color:white'>" + dueDate.toLocaleDateString() + "</div>";
    }
    else {  // we are outside of 180 days
        return "<div>" + dueDate.toLocaleDateString() + "</div>";
    }
}

---

If your field's internal name is "MaxEndDate", change the line

"DueDate:" {

to

"MaxEndDate": {

and then change the line

var dueDate = new Date(ctx.CurrentItem.DueDate);

to

var dueDate = new Date(ctx.CurrentItem.MaxEndDate);

The color is just defined using the inline CSS style of the div markup you are returning. In the code example above, I am returning a div with a red background and white text. If all you need is red text on the default background, you would do something like

return "<div style='color:red'>" + dueDate.toLocaleDateString() + "</div";

Answer 2

I whipped this up quick, works on a standard Task List.

function ColorCodeDueDate(ctx) {
  var fieldname=ctx.CurrentFieldSchema.RealFieldName,
      datevalue=new Date(ctx.CurrentItem[fieldname]),
      days=GetDaysAfterToday(datevalue);
  if (!days) return 'No '+fieldname;
  if (days<5) style="background-color:red;color:white";
  if (days<-30) style="background-color:green;color:white";
  return String.format("<div style='{0}'>{1} days from {2:dd/MM/yyyy}</div>",style,days,datevalue);
}

Notes:

• Use the Chrome Extension Cisar (by Andrei Markeev) to code CSR files.
• Should be easy to spot how to change it to your 180 days
• Do not hardcode internal fieldnames; this function can be applied to any DateTime field
• Try to code with only one exit point (return) in your functions; makes it a lot easier to read
• GetDaysAfterToday() comes from SharePoints own sp.datetimeutil.js library, but you might have to load it as extra JSLink first; because SP loads it after your CSR code executes
  (OR copy that function code into your own CSR file)
• String.format() comes from SharePoints msajaxbundle.js; which is loaded before your CSR code executes

With the https://iCSR.github.io Library you do not have to write a function at all

If you declare the View as:

'MaxEndDate':{
  View : iCSR.DueDate({
                        ranges:'[msRed],0,#FFF1AD,90,[msGreen]'
                        ,rowcolor:true
                        })
}

You get this: (screenshot from another post)

• msRed and msGreen are iCSR tokens matching the colors from the new Microsoft Planner
• iCSR adjusts the textcolor contrast for you (on each cell, you can't set a textcolor on a TR row)
• and more