Localizing Dates in a Perl web application with JavaScript
Tags: perl, mojolicious, javascript, l10n
Published: 2021-05-04 17:29:53

---
title: Localizing Dates in a Perl web application with JavaScript
published: true
date: 2021-05-04 14:00:00 UTC
tags: Perl,Mojolicious,JavaScript,L10n
canonical_url: https://phoenixtrap.com/2021/05/04/localizing-dates-in-a-perl-web-application-with-javascript/?utm_source=rss&utm_medium=rss&utm_campaign=localizing-dates-in-a-perl-web-application-with-javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n3re2lnjgo8dmtydn4u3.jpeg
---

[Last week’s article](https://phoenixtrap.com/2021/04/20/localizing-dates-in-a-perl-web-application/) received a comment on a private Facebook group that amounted to “just use JavaScript’s built-in formatting.” So what would that look like?

{% gist https://gist.github.com/mjgardner/877572565bfcb17e062090d69339c121 %}

It’s structured much like the [Perl-only solution](https://phoenixtrap.com/2021/04/20/localizing-dates-in-a-perl-web-application/), with a default `"/"` route and a `localize_date` [Mojolicious helper](https://docs.mojolicious.org/Mojolicious/Lite#helper) to do the formatting. I opted to output a piece of JavaScript from the helper on **lines 11 through 14** since it could be repeated several times in a document. You could instead declare a function in the default layout’s HTML `<head>` on line 38 that would receive a date and a formatting style, outputting the resulting formatted date.

In the template’s list from **lines 22 through 31** I decided to use JavaScript [`document.write`](https://developer.mozilla.org/en-US/docs/Web/API/Document/write) method calls to add our generated code. This has a [slew of caveats](https://developer.mozilla.org/en-US/docs/Web/API/Document/write#notes) but works for our example here.

Worth noting is the double equals sign (`<%== %>`) when [embedding a Perl expression](https://docs.mojolicious.org/Mojolicious/Guides/Rendering#Embedded-Perl). This prevents Mojolicious from XML-escaping special characters, e.g., replacing `"`quotes`"` with `&quot;`, `<`angle brackets`>` with `&lt;` and `&gt;`, etc. This is important when returning HTML and JavaScript code.

I also chose to use the JavaScript `Date` object’s [`toLocaleString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) method for my formatting on **line 12**. There are other ways to do this:

- Date objects also have a [`toLocaleDateString`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString) method. However, Mozilla has a [performance note](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#performance) that states it’s better to use the [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) object’s [`format`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format) property.
- But `Intl.DateTimeFormat`’s [browser support](https://caniuse.com/mdn-javascript_builtins_intl_datetimeformat_datetimeformat_datestyle) stands at about 70%, leaving out Safari (that’s Mac, iPhone, and iPad) and Internet Explorer users.
- There are JavaScript libraries and [polyfills](https://javascript.info/polyfills) to address these issues, but I’m trying to keep this example simple.

Note that **line 10** builds the parameters for JavaScript’s `Date` constructor using the [`year`](https://metacpan.org/pod/DateTime#%24dt-%3Eyear), `month_0`, and [`day`](https://metacpan.org/pod/DateTime#%24dt-%3Eday) methods of our Perl [`DateTime`](https://metacpan.org/pod/DateTime) object; `month_0` because the `Date` constructor takes its month as an integer from 0 to 11 rather than 1 to 12. JavaScript `Date`s can be [constructed in many ways](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date#parameters); this seemed the simplest without having to explain things like epochs and inconsistent parsing.

Why are we using Perl `DateTime`s and a helper anyway? I’m assuming that our dates are coming from the backend of our application, possibly [inflated from a database column](https://metacpan.org/pod/DBIx::Class::InflateColumn::DateTime). If your dates are strictly on the frontend, you might decide to put your formatting code there in a JavaScript function, perhaps using a JavaScript-based templating library.

The bottom line is to do whatever makes sense for your situation. I prefer the Perl solution because I like the language and its ecosystem and perhaps have acclimated to its quirks. The complications of JavaScript browser support, competing frameworks, and layers of tooling make my head hurt. Despite this, I’m still learning; if you have any comments or suggestions, please leave them below.