LogoLogo
HomePricingSign inRegister
  • PDFMonkey Documentation
  • Guides
    • From zero to generating your first Document
    • Generating your first Document with Zapier
    • Generating your first Document with Make
    • Making your first API call
  • PDFMonkey Features
    • 14-day Pro trial
    • Automatic deletion (TTL)
    • CLI
    • Generating images
    • Share links
    • Synchronous generation
    • Snippets
    • Webhooks
  • Frequent questions
    • Troubleshooting
      • My Document is blank
      • My data is not showing up in the Document
      • The Download URL is empty
    • What can you do with PDFMonkey?
    • What happens if I use all of my quota?
    • How do I change my password?
    • How do I delete my account?
    • Authoring Templates
      • Can I import an existing PDF or Word file in PDFMonkey?
      • What are the Template test data?
      • Can you create templates for me?
      • Can I display the number of the current page in the content?
      • Can I use links?
    • Privacy and security
      • What data do you keep and for how long?
      • How is my data secured?
      • Do you have a DPA
    • Compliance
  • How-tos
    • Adding a header or footer to your document
    • Including images in your documents
    • Styling your documents
      • Writing your own CSS
      • Using external libraries
      • Providing per-Document styles
      • Dealing with page breaks
    • Using different fonts
      • Handling special characters (UTF-8, Hebrew, Chinese, etc)
      • Using different fonts in header and footer
    • Using JavaScript
      • What are the available JavaScript features
      • JavaScript and Dynamic Data
      • Using external libraries
      • Displaying dates and time using JS
      • Including charts in your Documents
      • Debugging your JavaScript
    • Setting the filename of the generated Document
    • Changing the size of the page and its margins
    • Forcing a single page or use a full-page background
    • Using QR Codes
  • Integrations
    • List of integrations
    • Zapier
      • Generating your first Document with Zapier
      • Document generation options in Zapier
      • Reacting to generated documents in Zapier
      • TODO Retrieving a Document in Zapier
      • TODO Deleting a document using Zapier
      • Fixing frequent Zapier errors
    • Make (formerly Integromat)
      • Generating your first Document with Make
    • Workato
      • Generating a document with Workato
      • Deleting a document using Workato
      • Reacting to generated documents in Workato
    • Glide
    • Bubble
    • InvoiceBerry (via Zapier)
    • Ruby SDK
  • References
    • The Document Lifecycle
    • Liquid Reference
      • Introduction
      • Defining and using dynamic data
      • Variables
      • Naming variables
      • Conditions (if/else)
      • Iteration (dealing with lists)
      • Filters (data transformation)
        • Built-in filters
        • PDFMonkey filters
      • PDFMonkey Liquid tags
      • Whitespace control
    • API Reference
      • Documents
      • Templates
Powered by GitBook
On this page
  • toLocaleString(locales, options)
  • Using a library

Was this helpful?

  1. How-tos
  2. Using JavaScript

Displaying dates and time using JS

PreviousUsing external librariesNextIncluding charts in your Documents

Last updated 3 years ago

Was this helpful?

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 filter to set a timezone and the filter to format a date. On the JavaScript side, you can use the toLocaleString method.

toLocaleString(locales, options)

The 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>

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.

HTML
<script src="https://cdn.jsdelivr.net/npm/luxon@2.3.1/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>

You can learn more about the toLocaleString method in its .

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 and can be used as follows:

MDN documentation page
Luxon
toLocaleString
in_time_zone
date