Table View Cell Color Based on Date

[rpierce]

Hi All,

Does anyone have a code that will change the background color or the font color of a table view cell based on the date. I want to have the cell color red if the stored date is not Today and cell color green if the stored date is Today. I have code that changes the cell color based on text values. I don't know hot to reconfigure that code to work with dates. I've looked and now turn the AppGeniuses!

Thank you, Ray

[pbottcher]

Hi Ray,

can you please provide the code you use today and the format of your date.

[rpierce]

Hi again Pascal!

I was using the code below successfully until the new year. For some reason it simply stopped working. I don't remember making any changes to the structure of the database or doing anything that would suddenly interfere.

I have the field formatted as a "DATE" field in the database; "2025-01-01"

Code: Select all

<script>
jQuery(document).ready(function() {
  var tbody = $j('tbody');
  tbody.find('tr').each(function(){
    var dateTD = $j($(this).querySelector('.role_call-wrk_date'));
    var date = dateTD.text();
    var today = new Date(Date.now()).toLocaleString().split(',')[0]
  
    if (date != today)
    dateTD.addClass('danger');
  });
});
</script>

Capture.JPG (43.34 KiB) Viewed 22969 times

PS: I'll be visiting Nuremberg in March.

[pbottcher]

Hi Ray,

thanks for providing that. Can you please also show how the date is displayed on your website. In AppGini you can use different formats to display the date on the TV.

[rpierce]

Pascal,

The date is displayed as "01/01/2025"

Capture.JPG (11.62 KiB) Viewed 22956 times

[zibrahim]

Hi there,
I use the following codes in hooks/TABLENAME-tv.js to achieve this

Code: Select all

// highlight cell background color according to date status
$j(function () {
    $j('.TABLENAME-DATE_FIELD_NAME').each(function () {
        // get the variables
        var start_date = $j(this);
        var today = new Date;
        var sd = moment(start_date.text().trim(), AppGini.datetimeFormat());

        // skip processing if date is invalid
        if (!sd.isValid()) return;

        // calculate and process date diff
        var a = moment(sd);
        var b = moment(today);
        var c = a.diff(b, 'days', true);

        // apply the cell background class according to the date diff 
        if (c < 0 && c >= -1) {
            $j(this).addClass('success');
            return;
        }
        else {
            $j(this).addClass('danger');
            return;
        }
    });
});

Change the TABLENAME and DATE_FIELD_NAME accordingly.
You can also play around with the c value to achieve other calculation result.

Have a nice day.

[rpierce]

zibrahim,

That worked. Thank you.

It seems that I have used your code in the past but couldn't find it again.

It would sure be a great thing if the misc. codes that users put into the forum could be catalogued and stored for quick easy searches.

Thank you and also thank you to Pascal for always helping others!!

[raddsky]

Hi there! I hope you're doing well. How can I apply this code in a child table? I’d really appreciate your help! Thanks so much!

[zibrahim]

Hi Raddsky,
1. To apply in CHILD table (assuming that the CHILD table is the one appear under the Detail View), we need to put the code in the PARENT's dv.js file.
2. We also need to add the interval function as you may want to refresh child table or open child modal.

Below is the sample code i put in hooks/asset-dv.js where asset is the Parent Table and asset_event is the Child Table

Code: Select all

// highlight child status with label
$j(function () {
    setInterval(function () {
        $j('.asset_event-status').each(function () {
            var status = $j(this).text();
            if (status === 'REPORTED') {
                $j(this).html($j('<span/>').addClass('label lb-sm label-danger').append(" " + status));
                return;
            }
            if (status === 'IN PROGRESS') {
                $j(this).html($j('<span/>').addClass('label lb-sm label-warning').append(" " + status));
                return;
            }
            if (status === 'COMPLETED') {
                $j(this).html($j('<span/>').addClass('label lb-sm label-success').append(" " + status));
                return;
            }
        });
    }, 1000);
});

hope this help

[raddsky]

Hi Zibrahim,

Sorry for the late reply — I only just reopened my account Thanks for your message. I’ll try it now and see how it works.

Thanks again!

Rad