I have date fomula field that calculates difference between two date/time fields. On the Table component and either the Alpha PDF or the New PDF pages 2.0 the results doesnt display correctly. i.e.
for say 4 hours 6minutes 9 seconds it should display as 04:06:09 but instead it displays as 4:6:9. looks like the leading zeros are removed. I have tried setting it to hours HH:mm, HH:mm and HH:mm:ss but it doesnt make a difference. Has anyone else experienced this and more importatnt has anyone found a solution?
I have not run into this but I really have not done much with date/time at this point. I have run into decimal number formatting issues as well as wanted to format things differently in the cells. My solution has been to use javascript and regex to reformat it. Here is a script I am using to do something along these lines - it is just finding specific information and then adding line breaks between that information. I can adjust it to your specific needs later if you need help.
The final issue then is if you want to allow inline editing the formatting is lost on that row after an inline edit is submitted. I have not done that fix yet.
$('td.board-info > af-data-table-field > span').each(function(){ // Formats board info field
let info = $(this).text();
let boardOrder = /\d{5}-\d{1,2}|Stock\d{1,2}/.exec(info);
let sheetSize = /\d{1,2}\.\d{1,4}x\d{1,2}\.\d{1,4}/.exec(info); //.replace(/\.00{1,3}|\.[1-9]{1,2}(0{1,3})/g,'');
// sheetSize[0] = sheetSize[0].replace(/\.00{1,3}|\.[1-9]{1,2}(0{1,3})/g,'');
let boardInfo = /\d{2,3}[A-Z]{1,2}.*/.exec(info);
let cleanInfo = boardOrder[0] + "<br>" + sheetSize[0] + "<br>" + boardInfo[0];
$(this).html(cleanInfo);
});
This should be very close to what you need based on your example. You need to change the component # and assign a class to the field of the table you want to format. Then put that in for “column-to-change”.
TB.render('component_3', function () { // Runs when component renders -- Change component # to yours -- hover over 'i' icon of table in the pagebuilder page to see the id
function run() {
$('tr > td.column-to-change > af-data-table-field > span').each(function () { // Grabs data info from field -- change "column-to-change" to the class you add to the column you want to change
let info = $(this).text();
let hours = /^\d+:/.exec(info); //Uses regex to find hour + :
let minutes = /:(\d+:)/.exec(info); //Uses regex to find minutes + :
let seconds = /:\d{1,2}:(\d+)/.exec(info); //Uses regex to find seconds
if (hours[0].length < 2) {
hours = '0' + hours;
}
if (minutes[1].length < 2) {
minutes = '0' + minutes;
}
if (seconds[1].length < 2) {
seconds = '0' + seconds;
}
let cleanInfoTime = hours + minutes[1] + seconds[1]; //If need to do date also then add month, day, year variables above like the time variables and add here
$(this).html(cleanInfoTime);
});
}
setTimeout(run, 30); //Time delay for when changing from 1 table page to another
}