Conditional Color for Date Column based on Current Date

Technical queries
#1

Hi,

I would like to have the Task Due Date column (Custom Column with Date Formatting) to be highlighted in RED if the Task Due Date < CURRENTDATE or highlight in GREEN if Task Due Date >=CURRENTDATE.

The above is similar to what I have done for Event Type.

2023-11-09_10-31-32

Thank you.

#2

Hello,

In the “Postexecution” place of “Operations” you have to put a code like below

let el = document.querySelectorAll(’.hreport-table table tbody tr’);
let index = 0;

let currentDate = new Date();
console.log(currentDate)

el.forEach((item) => {
if (index !== 0) {
let row = item.querySelectorAll(‘td:nth-child(3)’);// replace 3 with your column number (starts from 1)
let reqText = row[0].querySelector(‘div’);
let givenDate = new Date(reqText.textContent);

if (givenDate < currentDate) {
  row[0].style.setProperty('background-color', 'red', 'important');
} else {
  row[0].style.setProperty('background-color', 'green', 'important');
}

}
index++;
});

image

#3

Hi,

Thank you for your reply. I tried the above code provided in PostExecution, but I am getting Invalid or Unexpected Token error.

Note, I have used a Custom Column (with Date Format to show only Date). Thought this was the issue and hence used the original column (with date time), but still the same issue.

Screenshot below for your reference.

image

Thank you.

#4

Hello
It does not look like the code has been used correctly. We can see some extra text coming (see refer image in red box)

image

#5

Hi,

Thank you for pointing that out as it was from by browser plugin. Unfortunately, replacing the proper code is also giving the the same issue.

Putting the code used for reference and screenshot.

let el = document.querySelectorAll(’.hreport-table table tbody tr’);
let index = 0;

let currentDate = new Date();
console.log(currentDate)

el.forEach((item) => {
if (index !== 0) {
let row = item.querySelectorAll(‘td:nth-child(2)’);
let reqText = row[0].querySelector(‘div’);
let givenDate = new Date(reqText.textContent);

if (givenDate < currentDate) {
row[0].style.setProperty(‘background-color’, ‘red’, ‘important’);
} else {
row[0].style.setProperty(‘background-color’, ‘green’, ‘important’);
}
}
index++;
});

image

#6

Hi,
we checked on our local server and the code is working fine. We tried the code you provided and it gave error because you used (‘) every where in the place of (’) single quote, that’s why perhaps these error are coming. You can please try this at your end and confirm.

#7

Hi,

Thank you for your response and highlighting the mistake. After changing, I was able to get the required highlights. However, the colors highlighting were not as per the condition <CurrentDate = RED else GREEN. As you can see in the screenshot, the colors are random and is highlighting green even if date <CurrentDate.

Any reason for this? Is this because ofthe console.log(currentDate). Please suggest.

image