web frontend for git repositories, written in Go
git.pocka.jp/legit.git
Display datetime in user's time zone by using JavaScript
Everytime I see datetime text with time zone I'm not familiar with, I
struggle to calculate from my local time zone. There are situations
where author's/committer's local time zone matters, (e.g. did they write
this patch in night?) I kept the original datetime in "title" attribute
(tooltip). Browsers' handling of "title" attribute is bad, but it's
better than nothing.
Shota FUJI
(Mar 27, 2025, 6:20 PM +0900)
44c4ba1f
5e6eb22b
+92
-5
+69
static/convert-to-local-datetime.js
+69
static/convert-to-local-datetime.js
···
1
+
// Copyright 2025 Shota FUJI <pockawoooh@gmail.com>
2
+
// SPDX-License-Identifier: MIT
3
+
//
4
+
// ===
5
+
//
6
+
// This script scans every "<time>" elements with "data-local-format" attribute,
7
+
// replaces each element's text node with local datetime.
8
+
// If a "<time>" element does not have valid "datetime" attribute, this script
9
+
// skips the "<time>" element.
10
+
//
11
+
// "data-local-format" attribute accepts one of the below:
12
+
// - "datetime" ... displays date and time (default)
13
+
// - "date" ... displays date
14
+
// - "time" ... displays time
15
+
//
16
+
// This script intentionally uses scratch serialization instead of locale-aware
17
+
// APIs; locale strings often includes non-English characters thus does not
18
+
// incorporate with the rest of a page. As majority of readers are familiar with
19
+
// softwares, using RFC3339-ish style date and time format fits better than an
20
+
// uncontrollable locale string.
21
+
22
+
function toTimeString(date) {
23
+
return date.getHours().toString().padStart(2, "0") + ":"
24
+
+ date.getMinutes().toString().padStart(2, "0") + ":"
25
+
+ date.getSeconds().toString().padStart(2, "0");
26
+
}
27
+
28
+
function toDateString(date) {
29
+
// I don't expect this software/code will survive for 8000yrs.
30
+
return date.getFullYear().toString().padStart(4, "0") + "-"
31
+
// stupid spec made by American
32
+
+ (date.getMonth() + 1).toString().padStart(2, "0") + "-"
33
+
+ date.getDate().toString().padStart(2, "0");
34
+
}
35
+
36
+
function toDateTimeString(date) {
37
+
return toDateString(date) + " " + toTimeString(date);
38
+
}
39
+
40
+
const targets = document.querySelectorAll("time[data-local-format]");
41
+
for (const target of targets) {
42
+
const datetime = target.dateTime && Date.parse(target.dateTime);
43
+
if (Number.isNaN(datetime)) {
44
+
continue;
45
+
}
46
+
47
+
const originalText = target.textContent.trim();
48
+
49
+
switch (target.dataset.localFormat || "datetime") {
50
+
case "datetime":
51
+
target.textContent = toDateTimeString(new Date(datetime));
52
+
break;
53
+
case "date":
54
+
target.textContent = toDateString(new Date(datetime));
55
+
break;
56
+
case "time":
57
+
target.textContent = toTimeString(new Date(datetime));
58
+
break;
59
+
default:
60
+
console.warn(
61
+
`Found unknown value on data-local-format attribute: "${target.dataset.localFormat}".\n`
62
+
+ `Available values are: "datetime", "date", "time"\n`
63
+
+ "Skipping text replacement.",
64
+
);
65
+
break;
66
+
}
67
+
68
+
target.title = originalText;
69
+
}
+9
-2
templates/repo-commit.html.tmpl
+9
-2
templates/repo-commit.html.tmpl
···
13
13
{{ $shorthash }} - {{ .Meta.DisplayName }}
14
14
</title>
15
15
<meta name="description" content='{{ $shorthash }} in {{ .Meta.DisplayName }}' />
16
+
<script type="module" src="/static/convert-to-local-datetime.js"></script>
16
17
</head>
17
18
<body>
18
19
<header class="header">
···
108
109
</dd>
109
110
<dt class="metadata--key">Authored at</dt>
110
111
<dd class="metadata--value">
111
-
<time datetime='{{ .Commit.Author.When.Format "2006-01-02T15:04:05-0700" }}'>
112
+
<time
113
+
datetime='{{ .Commit.Author.When.Format "2006-01-02T15:04:05-0700" }}'
114
+
data-local-format=""
115
+
>
112
116
{{ .Commit.Author.When.Format "2006-01-02 15:04:05 -0700" }}
113
117
</time>
114
118
</dd>
···
120
124
</dd>
121
125
<dt class="metadata--key">Committed at</dt>
122
126
<dd class="metadata--value">
123
-
<time datetime='{{ .Commit.Committer.When.Format "2006-01-02T15:04:05-0700" }}'>
127
+
<time
128
+
datetime='{{ .Commit.Committer.When.Format "2006-01-02T15:04:05-0700" }}'
129
+
data-local-format=""
130
+
>
124
131
{{ .Commit.Committer.When.Format "2006-01-02 15:04:05 -0700" }}
125
132
</time>
126
133
</dd>
+9
-2
templates/repo-log-ref.html.tmpl
+9
-2
templates/repo-log-ref.html.tmpl
···
12
12
Commit history at {{ .Meta.Ref }} - {{ .Meta.DisplayName }}
13
13
</title>
14
14
<meta name="description" content='Commit history on {{ .Meta.DisplayName }} at {{ .Meta.Ref }}' />
15
+
<script type="module" src="/static/convert-to-local-datetime.js"></script>
15
16
</head>
16
17
<body>
17
18
<header class="header">
···
48
49
{{- .Author.Name -}}
49
50
</a>
50
51
authored at
51
-
<time datetime='{{ .Author.When.Format "2006-01-02T15:04:05-0700" }}'>
52
+
<time
53
+
datetime='{{ .Author.When.Format "2006-01-02T15:04:05-0700" }}'
54
+
data-local-format=""
55
+
>
52
56
{{ .Author.When.Format "2006-01-02 15:04:05 -0700" }}
53
57
</time>
54
58
</span>
···
57
61
{{- .Committer.Name -}}
58
62
</a>
59
63
comitted at
60
-
<time datetime='{{ .Committer.When.Format "2006-01-02T15:04:05-0700" }}'>
64
+
<time
65
+
datetime='{{ .Committer.When.Format "2006-01-02T15:04:05-0700" }}'
66
+
data-local-format=""
67
+
>
61
68
{{ .Committer.When.Format "2006-01-02 15:04:05 -0700" }}
62
69
</time>
63
70
</span>
+5
-1
templates/repo-top.html.tmpl
+5
-1
templates/repo-top.html.tmpl
···
12
12
{{- if .Meta.Description }}
13
13
<meta name="description" content="{{ .Meta.Description }}" />
14
14
{{- end }}
15
+
<script type="module" src="/static/convert-to-local-datetime.js"></script>
15
16
</head>
16
17
<body>
17
18
<header class="header">
···
60
61
{{- .Committer.Name -}}
61
62
</a>
62
63
comitted at
63
-
<time datetime='{{ .Committer.When.Format "2006-01-02T15:04:05-0700" }}'>
64
+
<time
65
+
datetime='{{ .Committer.When.Format "2006-01-02T15:04:05-0700" }}'
66
+
data-local-format=""
67
+
>
64
68
{{ .Committer.When.Format "2006-01-02 15:04:05 -0700" }}
65
69
</time>
66
70
</span>