diff --git a/src/embed-receipt.ts b/src/embed-receipt.ts
index 0c35042..cd87a6c 100644
--- a/src/embed-receipt.ts
+++ b/src/embed-receipt.ts
@@ -12,6 +12,7 @@ import { tsToDate } from "./pageutils";
import prettyBytes from "pretty-bytes";
import { property } from "lit/decorators.js";
import type { ItemType } from "./types";
+import { dateTimeFormatter } from "./utils/dateTimeFormatter";
// ===========================================================================
export class RWPEmbedReceipt extends LitElement {
@@ -184,7 +185,9 @@ export class RWPEmbedReceipt extends LitElement {
? `https://crt.sh/?q=${certFingerprint}`
: "";
- const dateStr = tsToDate(this.ts).toLocaleString();
+ const dateStr = this.ts
+ ? dateTimeFormatter.format(tsToDate(this.ts) as Date)
+ : "";
return html`
diff --git a/src/item-info.ts b/src/item-info.ts
index f117f4f..092417e 100644
--- a/src/item-info.ts
+++ b/src/item-info.ts
@@ -7,6 +7,7 @@ import prettyBytes from "pretty-bytes";
import type { ItemType } from "./types";
import "./components/labeled-field";
+import { dateTimeFormatter } from "./utils/dateTimeFormatter";
// ===========================================================================
class ItemInfo extends LitElement {
@@ -111,7 +112,9 @@ class ItemInfo extends LitElement {
`
: nothing}
- ${item!.ctime ? new Date(item!.ctime).toLocaleString() : nothing}
+ ${item!.ctime
+ ? dateTimeFormatter.format(new Date(item!.ctime))
+ : nothing}
${prettyBytes(Number(item!.totalSize || item!.size || 0))}
diff --git a/src/item.ts b/src/item.ts
index e50216c..bb71dff 100644
--- a/src/item.ts
+++ b/src/item.ts
@@ -55,6 +55,7 @@ import type { Replay } from "./replay";
import { ifDefined } from "lit/directives/if-defined.js";
import "./item-info";
+import { dateTimeFormatter } from "./utils/dateTimeFormatter";
const RWP_SCHEME = "search://";
@@ -756,6 +757,7 @@ class Item extends LitElement {
align-items: center;
transition: background-color var(--sl-transition-fast);
color: var(--sl-color-neutral-600);
+ font-variant-numeric: tabular-nums;
}
.timestamp-dropdown-btn:hover {
@@ -782,6 +784,10 @@ class Item extends LitElement {
transform: translateY(0.075em);
}
+ .timestamp-menu-item {
+ font-variant-numeric: tabular-nums;
+ }
+
.timestamp-menu-item[aria-selected="true"]::part(label) {
color: var(--sl-color-blue-600);
}
@@ -1245,7 +1251,9 @@ class Item extends LitElement {
protected renderToolbarRight() {
const isReplay = !!this.tabData.url;
- const dateStr = tsToDate(this.ts).toLocaleString();
+ const dateStr = this.ts
+ ? dateTimeFormatter.format(tsToDate(this.ts) as Date)
+ : "";
return html`