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.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>
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>
Last modified 1yr ago