Beta: Quote Template Customisation - DateTime Formatting

[amandaulm]

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:

https://developers.hubspot.com/docs/cms/hubl/filters#datetimeformat

However, I can't get anything to work. Here are some formats I've tried applying; each one fails (I get an empty blank in place of the timestamp):

{{ item.hs_recurring_billing_start_date|datetimeformat('%b %e, %Y') }}

{{ item.hs_recurring_billing_start_date|datetimeformat('%B %e, %Y %l:%M %p') }}

{{ item.hs_recurring_billing_start_date|datetimeformat('%c', 'America/New_York') }}

What am I missing here to make this work?

[piersg]

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;
}

[amandaulm · Accepted solution]

Makes sense, @piersg ! Thanks for that.

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:

{{ item.hs_recurring_billing_start_date|int|datetimeformat('%b %e, %Y') }}

[piersg]

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

{% set start_date = item.hs_recurring_billing_start_date %}
<td>{{ start_date|datetimeformat('%B %e, %Y') }}</td>

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:

<td>{{ item.hs_recurring_billing_start_date|unixtimestamp|datetimeformat('%B %e, %Y') }}</td>

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;
}

[amandaulm]

I appreciate your thoughts here, @piersg ! Some testing notes:

For suggestion #1, using 

% set start_date

I got the same results, where calling start_date alone produced the long number, and adding the format resulted in a blank.

For suggestion #2, using

{{ item.hs_recurring_billing_start_date|unixtimestamp|datetimeformat('%B %e, %Y') }}

 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.

[Kevin-C]

Hmm I'm stumped.

Maybe @piersg might have some insight?

[Kevin-C]

Hey @amandaulm 

When you print the value without a filter what values are you getting? Could you provide them?

Could you provide the coed that you're working with?

[amandaulm]

Without the format applied, I get this style of timestamp in that table cell:  1609113600000

Here is the code block from that section; it's built from a clone of the quote_simple.html Hubspot template.

<section aria-label="quote" class="quote">
<div class="quote__total">
<span>Total</span>
<span>{{ QUOTE_TOTAL|format_currency(LOCALE, CURRENCY, true) }}</span>
</div>
<table>
<thead>
<tr>
<th scope="col">PRODUCTS<br />&amp; SERVICES</th>
<th scope="col">STANDARD<br />RATE</th>
<th scope="col">ADDITIONAL<br />HOUR RATE</th>
<th scope="col">CONTRACTED<br />UNITS</th>
<th scope="col">START<br />DATE</th>
<th></th>
<th scope="col">YEARLY<br />TOTAL</th>
</tr>
</thead>
<tbody class="line-items">
{% for item in LINE_ITEMS|sort(False, False, 'hs_position_on_quote') %}
<tr>
<td>{{ item.name }}</td>
<td>{{ item.hs_sku }}</td>
<td>{{ (item.price)|format_currency(LOCALE, CURRENCY, true) }}</td>
<td>{{ item.additional_hour_rate|format_currency(LOCALE, CURRENCY, true) }}</td>
<td>{{ item.quantity }}</td>
<td>{{ item.hs_recurring_billing_start_date }}</td>
<td>
{% if item.discount %}
after {{ (item.discount)|format_currency(LOCALE, CURRENCY, true) }} discount
{% endif %}</td>
<td>{{ item.amount|format_currency(LOCALE, CURRENCY, true) }}</td>
</tr>
{% endfor %}
</tbody>