Table View Cell Color Based on Date

The recommended method of customizing your AppGini-generated application is through hooks. But sometimes you might need to add functionality not accessible through hooks. You can discuss this here.
Post Reply
rpierce
Veteran Member
Posts: 283
Joined: 2018-11-26 13:55
Location: Washington State

Table View Cell Color Based on Date

Post by rpierce » 2025-01-03 04:59

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
AppGini Super Hero
AppGini Super Hero
Posts: 1674
Joined: 2018-04-01 10:12

Re: Table View Cell Color Based on Date

Post by pbottcher » 2025-01-03 13:02

Hi Ray,

can you please provide the code you use today and the format of your date.
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

rpierce
Veteran Member
Posts: 283
Joined: 2018-11-26 13:55
Location: Washington State

Re: Table View Cell Color Based on Date

Post by rpierce » 2025-01-03 17:00

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
Capture.JPG (43.34 KiB) Viewed 309 times
PS: I'll be visiting Nuremberg in March.

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1674
Joined: 2018-04-01 10:12

Re: Table View Cell Color Based on Date

Post by pbottcher » 2025-01-03 17:36

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.
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

rpierce
Veteran Member
Posts: 283
Joined: 2018-11-26 13:55
Location: Washington State

Re: Table View Cell Color Based on Date

Post by rpierce » 2025-01-03 23:31

Pascal,

The date is displayed as "01/01/2025"
Capture.JPG
Capture.JPG (11.62 KiB) Viewed 296 times

User avatar
zibrahim
Veteran Member
Posts: 163
Joined: 2020-01-28 18:30
Location: Malaysia

Re: Table View Cell Color Based on Date

Post by zibrahim » 2025-01-04 00:44

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.
Zala.
Appgini 24.19, MacOS 15.2 Windows 11 on Parallels.

rpierce
Veteran Member
Posts: 283
Joined: 2018-11-26 13:55
Location: Washington State

Re: Table View Cell Color Based on Date

Post by rpierce » 2025-01-04 17:58

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!!

Post Reply