Page 1 of 1
Table View Cell Color Based on Date
Posted: 2025-01-03 04:59
by 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
Re: Table View Cell Color Based on Date
Posted: 2025-01-03 13:02
by pbottcher
Hi Ray,
can you please provide the code you use today and the format of your date.
Re: Table View Cell Color Based on Date
Posted: 2025-01-03 17:00
by 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 23026 times
PS: I'll be visiting Nuremberg in March.
Re: Table View Cell Color Based on Date
Posted: 2025-01-03 17:36
by 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.
Re: Table View Cell Color Based on Date
Posted: 2025-01-03 23:31
by rpierce
Pascal,
The date is displayed as "01/01/2025"
- Capture.JPG (11.62 KiB) Viewed 23013 times
Re: Table View Cell Color Based on Date
Posted: 2025-01-04 00:44
by 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.
Re: Table View Cell Color Based on Date
Posted: 2025-01-04 17:58
by 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!!
Re: Table View Cell Color Based on Date
Posted: 2025-03-22 08:13
by 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!
Re: Table View Cell Color Based on Date
Posted: 2025-03-23 06:24
by 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
Re: Table View Cell Color Based on Date
Posted: 2025-05-12 09:09
by 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