I have put some code together so that now you can display dates in a relative to the current time format. For example. Instead of 05/04/2023 12:00am this code changes it to 9 hours ago for example. It picks up seconds, minutes, hours, days, weeks, months, and years. This works on all lists, tables and detail sections and thiss works everytime the page is loaded.
So it goes like this and theres only 2 things you need to do to get this to work.
- You need to have the selected date in the builder set to either DD/MM/YYYY or MM/DD/YYYY and make sure you include the time in am/pm format.
- You need add the field number for the date on the second line of the code for the variable relativeDateFields seprated by ,
$(document).on('knack-view-render.any', function (scene) {
var relativeDateFields = $('.field_2, .field_* ');
// Find the 'span' element inside the parent element that includes text with a date
relativeDateFields.find('span').each(function() {
var spanText = $(this).text();
var dateRegex = /\d{1,2}\/\d{1,2}\/\d{4}/;
if (spanText && dateRegex.test(spanText)) {
$(this).addClass('realtiveDatefield');
}
});
});
$(document).on('knack-view-render.any', function (scene) {
// get the date text from the HTML element
var dateText = $('.realtiveDatefield').text();
// determine the date format (either "DD/MM/YYYY" or "MM/DD/YYYY")
var dateFormat = dateText.includes('/') ? 'DD/MM/YYYY' : 'MM/DD/YYYY';
// split the date and time components
var dateTime = dateText.split(' ');
// split the date components into day, month, and year
var dateParts = dateTime[0].split('/');
var day, month, year;
if (dateFormat === 'DD/MM/YYYY') {
day = parseInt(dateParts[0]);
month = parseInt(dateParts[1]) - 1; // subtract 1 from the month to get a 0-based index
year = parseInt(dateParts[2]);
} else {
month = parseInt(dateParts[0]) - 1; // subtract 1 from the month to get a 0-based index
day = parseInt(dateParts[1]);
year = parseInt(dateParts[2]);
}
// split the time components into hours and minutes
var timeParts = dateTime[1].split(':');
var hours = parseInt(timeParts[0]);
var minutes = parseInt(timeParts[1]);
// create a Date object from the date and time components
var date = new Date(year, month, day, hours, minutes);
// calculate the difference between the date and the current time
var diff = new Date() - date;
// define time intervals in milliseconds
var minute = 60 * 1000;
var hour = 60 * minute;
var day = 24 * hour;
var week = 7 * day;
var month = 30 * day;
var year = 365 * day;
// determine which time interval the difference falls within
var interval;
if (diff < minute) {
interval = Math.round(diff / 1000);
$('.realtiveDatefield').text(interval + ' second' + (interval > 1 ? 's' : '') + ' ago');
} else if (diff < hour) {
interval = Math.round(diff / minute);
$('.realtiveDatefield').text(interval + ' minute' + (interval > 1 ? 's' : '') + ' ago');
} else if (diff < day) {
interval = Math.round(diff / hour);
$('.realtiveDatefield').text(interval + ' hour' + (interval > 1 ? 's' : '') + ' ago');
} else if (diff < week) {
interval = Math.round(diff / day);
$('.realtiveDatefield').text(interval + ' day' + (interval > 1 ? 's' : '') + ' ago');
} else if (diff < month) {
interval = Math.round(diff / week);
$('.realtiveDatefield').text(interval + ' week' + (interval > 1 ? 's' : '') + ' ago');
} else if (diff < year) {
interval = Math.round(diff / month);
$('.realtiveDatefield').text(interval + ' month' + (interval > 1 ? 's' : '') + ' ago');
} else {
interval = Math.round(diff / year);
$('.realtiveDatefield').text(interval + ' year' + (interval > 1 ? 's' : '') + ' ago');
}
});
