I'm trying to display the line-item-level Start Date property in the line item grid on our custom quote template. I was able to determine that this will display what I need as a 13-digit timestamp:
{{ item.hs_recurring_billing_start_date }}
In order to display that number as a human-readable date, I've been using the guidelines at this page:
I wanted to add here as well that Hubspot support was able to identify that the hs_recurring_billing_start_date attribute was printing as a string; adding a filter to convert the string to integer before formatting resolved the issue:
Hi @amandaulm, on the JS function, it would only work once because it's targeting an id rather than a class. You can make these changes so it'll work for all instances (this is using class and data attribute for targeting)
<td class="startDate" data-date="{{item.hs_recurring_billing_start_date}}"></td>
<script>timeConverter({{item.hs_recurring_billing_start_date}});</script>
function timeConverter(timestamp){
var a = new Date(timestamp);
var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var year = a.getFullYear();
var month = months[a.getMonth()];
var date = a.getDate();
var hour = a.getHours();
var min = a.getMinutes();
var sec = a.getSeconds();
var time = date + ' ' + month + ' ' + year;
document.querySelector('.startDate[data-date="'+timestamp+'"]').textContent = time;
}
I wanted to add here as well that Hubspot support was able to identify that the hs_recurring_billing_start_date attribute was printing as a string; adding a filter to convert the string to integer before formatting resolved the issue:
Hi @amandaulm (and thanks @Kevin-C). I'm also not sure about this. I see no reason why the datetimeformat filter wouldn't work; @IsaacTakushi might. Just as a shot in the dark, try
and see if that works. If it doesn't, it could be that hs_recurring_billing_start_date isn't actually a date object (which would be very weird) so you could try to convert it and do:
If all else fails, here's a JS function to convert a unix timestamp to a readable date
// add an id to where you want the date
<td id="startDate"></td>
<script>timeConverter({{item.hs_recurring_billing_start_date}});</script>
// add this function either in script tags or to your JS file
function timeConverter(timestamp){
var a = new Date(timestamp);
var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var year = a.getFullYear();
var month = months[a.getMonth()];
var date = a.getDate();
var hour = a.getHours();
var min = a.getMinutes();
var sec = a.getSeconds();
var time = date + ' ' + month + ' ' + year;
document.getElementById('startDate').textContent = time;
}
also produced a blank. I also tried only adding the unixtimestamp portion and not the datetimeformat, and this was blank as well, which seems odd to me.
For suggestion #3, using the JS, I put this entire part into the table where I want the cell to appear:
// add an id to where you want the date
<td id="startDate"></td>
<script>timeConverter({{item.hs_recurring_billing_start_date}});</script>
Then I added the function in script tags, first to the top of the quote template file, then further down inside the "for item" loop as a test, but in both cases it works on the first line item only; subsequent lines have a blank start date cell.