SharePoint Conditional Formatting Date Column

Question

I've been trying to create a Conditional Color column for dates that are expired. The expired dates should be red and the dates that are not should be clear.

I tried to use the code from http://www.ilikesharepoint.de/2015/03/sharepoint-2013-conditional-formatting-in-listviews

I used this code before, and it worked once I did some configuration, however, this time the code isn't working when I did the dates, here is the list below:

Can anyone help to see what's going on?

Answer 1

MDS will not be problem if you use RegisterModuleInit

• First of all use Chrome and the Cisar WYSIWYG CSR editor

• It gives you the boilerplate code that will work fine with MDS

:

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {
  function init() {
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
      Templates: {
          Fields: {
              "<field internal name>": {
                  View: function(ctx) { 
                    <your code>
                    return <return html>;
                  }
              }
          }
      }
    });
  }
  RegisterModuleInit(
    SPClientTemplates.Utility.ReplaceUrlTokens("~siteCollection/Style Library/myfile.js")
    , init);
  init();
});

---

Furthermore

• Do not proces Dates as Strings
• SharePoint provides a GetDaysAfterToday
• SharePoint provides String.format method

Formatting can be as concise as:

          "Created": {
              View: function(ctx) { 
                var value=new Date(ctx.CurrentItem[this.Name]);
                var daysDiff=GetDaysAfterToday(value);
                var color='inherit';
                if(daysDiff<0) color='red';
                return String.format("<span style='color:{0}'>{1:d}</span>",color,value);
              }

---

For more Date & Code examples see: https://sharepoint.stackexchange.com/search?q=getdaysaftertoday