Displaying dates and time using JS

PDFMonkey’s engine runs on AWS servers located in Europe. The timezone of the server might not be the one you want your dates to be displayed in.

On the Liquid side you can use the in_time_zone filter to set a timezone and the date filter to format a date. On the JavaScript side, you can use the toLocaleString method.

toLocaleString(locales, options)

The toLocaleString method returns a string with a language sensitive representation of a date.

The locales and options arguments let applications specify the language whose formatting conventions should be used and customize the behavior of the function.

HTML

<script>
  // Displaying the current date (PDF generation date) using French conventions.
  //
  new Date().toLocaleString('fr-FR');
  //=> "25/10/2050, 12:34:56"

  // Displaying a date provided in your Document payload using US conventions.
  // Sample payload
  // { "someDate": "2050-10-25 12:34:56" }
  //
  new Date($docPayload.someDate).toLocaleString('en-US');
  //=> "10/25/2050, 12:34:56 PM"

  // Displaying a date using en-US conventions in a custom timezone.
  //
  let date = new Date(Date.UTC(2050, 1, 1, 12, 34, 56));
  new Date(date).toLocaleString('en-GB', { timeZone: 'Pacific/Honolulu' });
  //=> "01/02/2050, 02:34:56"
</script>

You can learn more about the toLocaleString method in its MDN documentation page.

Using a library

Paid account only

Using an external JS library will only work on a paid account. On a free account preview and generation will be blocked.

If you need the help of a more powerful library, you can always load the one you need. The most frequently used one it MomentJS but we recommend a more recent iteration of the same idea by the actual author of MomentJS. It's called Luxon and can be used as follows:

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/global/luxon.min.js"></script>
<script>
  let { DateTime } = luxon;
  let date = DateTime.fromISO("2050-01-01T12:34:56");
  date.plus({ days: 3 }).setZone('Pacific/Honolulu').toLocaleString(DateTime.DATETIME_HUGE);
  //=> "Tuesday, 4 January 2050, 01:34 Hawaii-Aleutian Standard Time"
</script>