How to change the color of the date value when have passed 2 days in a SharePoint list?

48 views Asked by At

I am trying to change the color of Due Date when it is more than 2 days to become Red and if within 2 days Orange and less then 2 days to be Green . I have created this DueDateStatus calculated column to calculate the amount of days from the current date to the date that is set by the user in the Due Date.

enter image description here

enter image description here

The next step for me is to create a jquery that will be added a script editor with the list in the same site page. Unfortunately, this is part where I am stuck with the code or the script. It is not working as expected.

enter image description here

script type="text/javascript" src="https://..../../.../.../Scripts/Libraries/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
   $(document).ready(function() {
      // Customize the selector based on your HTML structure and due date column name
      $("td.ms-vb2:contains('Due Date')").each(function() {
         var dueDateCell = $(this);
         var dueDate = new Date(dueDateCell.text());
         var today = new Date();

         // Customize the date comparison logic and styling based on your requirements
         if (dueDate < today) {
            dueDateCell.css('color', 'red');
         } else {
            dueDateCell.css('color', 'green');
         }
      });
   });
</script>

What I tried so far:

  • Created a calculated column and validation rule.
  • Tried different script editors.
  • I cannot try the same with JSON as this is SharePoint 2016 version, not the cloud based. Results I am trying to achieve: To change the color of Due Date when it is more than 2 days to become Red and if within 2 days Orange and less then 2 days to be Green.
0

There are 0 answers