0

I have the following JS script to color code our custom list items inside out list view, by checking if the item is status does not equal Delivered and its EndDate has been bypassed:-

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {
       function init() {
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
          Templates: {},
          OnPostRender: function(ctx) {
           var rows = ctx.ListData.Row;
           for (var i=0;i<rows.length;i++)
           {
              var currentDate = new Date();
              var enddate = rows[i]["EnDDate"];
              var status = rows[i]["OrderStatus"];
              var rowId = GenerateIIDForListItem(ctx, rows[i]);
              var row = document.getElementById(rowId); 
              if(row != null) {
                  if(status != 'Delivered' && enddate  && enddate < currentDate
                  )
                  {
                 row.style.backgroundColor = '#FA8072';
                 row.style.fontWeight = "bold";
                  }

now the above will not color code anything. the problem i think is that our EndDate field value will be return as follow 28/09/2018 while the currentDate will be retruned in the follow format Tue Oct 09 2018 15:09:11 GMT+0100 (GMT Daylight Time) .. so i think this will make my comparison enddate < currentDate return unexpected results! so can anyone advice on this please?

1 Answer 1

1

All you need to do is make your enddate variable a Date object that is based on the field value, like this:

var enddate = new Date(rows[i]["EnDDate"]); // is that really two capital Ds, or is that a typo?

I also see though that you are checking that enddate has a value, which means you are expecting that it might be blank? In which case you might want to do something like:

var enddate = rows[i]["EnDDate"];
if (enddate) {
    enddate = new Date(enddate);
}

// and then later keep the same validation check:
if (status != 'Delivered' && enddate && enddate < currentDate)

If you are using a European format (day/month/year) you will need to swap the day and month, and if you are moving things around you might as well call the Date constructor with year, month, date, but if you do that you also have to keep in mind that in Javascript, months are zero-based. So, if you are absolutely certain that the separators will be slashes, you could do:

var enddate = rows[i]["EnDDate"];
if (enddate) {
    var dateParts = enddate.split('/');
    enddate = new Date(dateParts[2], dateParts[1] - 1, dateParts[0]); // subtract one from the month because in code it is zero-based
}

If you are not absolutely certain that your separators will be slashes, you will need more complex logic to separate the parts and swap things around.

14
  • 1
    @SharePointTestDev updated my answer, but also have a question for you: is the EnDDate field a text field, or is it a DateTime field? Oct 9, 2018 at 15:34
  • 1
    @SharePointTestDev sorry, I had a typo in my sample code, wrong array indexes in the wrong places. Updated my answer to correct the typos. Oct 9, 2018 at 17:15
  • 1
    To do that I would try just creating a new Date with the field value directly, like I originally suggested, like enddate = new Date(enddate);. That will work for US format dates, but not for EU format, so then you would need to check whether enddate is a valid date, and if not, you know you have an EU format and need to rearrange it. Oct 9, 2018 at 23:08
  • 1
    Long day yesterday for me, I wasn't thinking straight, but yes, you are absolutely correct, there are certain dates that might be valid US format even though they are meant to be a different date in EU format. So... maybe that's a new question you can ask - how to detect what date format a user is seeing? My guess is that if the SharePoint server is set to show a certain format, that's what everyone will see, their browser will not override that, but I couldn't say 100% certain. Oct 10, 2018 at 12:52
  • 1
    Maybe, but that shouldn't matter. new Date() will always give you "today, right now". And once you have two valid Date objects that are set for the correct dates, you can make the enddate < currentdate comparison. Date objects in and of themselves don't really have a "format", they are objects. What's coming out of SharePoint as that field value is really a string though, which is why you have to convert it into a Date object in order to properly make the comparison. Oct 10, 2018 at 13:20

Your Answer

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

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