Add basic date & time formatters using navigator language (#404)

Adjacent to #400 — while this isn't yet a proper localization pass, at
least dates & times will now use the user's browser language/locale
settings. When used in Browsertrix, this should ensure dates are
formatted more consistently, at least when the user has a locale with a
language matching one of the supported languages in Browsertrix set in
their browser settings.

Also adds tabular numerals in a few places (e.g. lists of dates/times).

src/pageentry.ts

@@ -9,6 +9,11 @@ import { getPageDateTS, getReplayLink } from "./pageutils";
 
 import { wrapCss } from "./misc";
 import type { URLResource } from "./types";
+import {
+  dateFormatter,
+  dateTimeFormatter,
+  timeFormatter,
+} from "./utils/dateTimeFormatter";
 
 // ===========================================================================
 class PageEntry extends LitElement {
@@ -154,6 +159,10 @@ class PageEntry extends LitElement {
       .media-content a {
         display: block;
       }
+
+      .col-date {
+        font-variant-numeric: tabular-nums;
+      }
     `);
   }
 
@@ -218,20 +227,8 @@ class PageEntry extends LitElement {
             `
           : ""}
         <div class="column col-date is-2">
-          <div>
-            ${
-              // TODO: Fix this the next time the file is edited.
-              // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-              date ? date.toLocaleDateString() : ""
-            }
-          </div>
-          <div>
-            ${
-              // TODO: Fix this the next time the file is edited.
-              // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-              date ? date.toLocaleTimeString() : ""
-            }
-          </div>
+          <div>${date ? dateFormatter.format(date) : ""}</div>
+          <div>${date ? timeFormatter.format(date) : ""}</div>
         </div>
         <div class="column">
           <div class="media">
@@ -259,11 +256,7 @@ class PageEntry extends LitElement {
                     >${this.thumbnailValid ? this.renderFavicon() : ""}
                   </p>
                   <p class="has-text-grey-dark text is-inline-date">
-                    ${
-                      // TODO: Fix this the next time the file is edited.
-                      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                      date ? date.toLocaleString() : ""
-                    }
+                    ${date ? dateTimeFormatter.format(date) : ""}
                   </p>
                 </a>
                 ${this.textSnippet