Fix date rendering by adding <gitea-locale-date>

Author: silverwind

modules/timeutil/datetime.go

@@ -52,17 +52,16 @@ func DateTime(format string, datetime any, extraAttrs ...string) template.HTML {
 	attrs := make([]string, 0, 10+len(extraAttrs))
 	attrs = append(attrs, extraAttrs...)
 	attrs = append(attrs, `data-tooltip-content`, `data-tooltip-interactive="true"`)
-	attrs = append(attrs, `format="datetime"`, `weekday=""`, `year="numeric"`)
+	attrs = append(attrs, `weekday=""`, `year="numeric"`)
 
 	switch format {
-	case "short":
-		attrs = append(attrs, `month="short"`, `day="numeric"`)
-	case "long":
-		attrs = append(attrs, `month="long"`, `day="numeric"`)
+	case "short", "long":
+		attrs = append(attrs, `month="`+format+`"`, `day="numeric"`)
+		return template.HTML(fmt.Sprintf(`<gitea-locale-date %s date="%s"></gitea-locale-date>`, strings.Join(attrs, " "), datetimeEscaped))
 	case "full":
-		attrs = append(attrs, `month="short"`, `day="numeric"`, `hour="numeric"`, `minute="numeric"`, `second="numeric"`)
+		attrs = append(attrs, `format="datetime"`, `month="short"`, `day="numeric"`, `hour="numeric"`, `minute="numeric"`, `second="numeric"`)
+		return template.HTML(fmt.Sprintf(`<relative-time %s datetime="%s">%s</relative-time>`, strings.Join(attrs, " "), datetimeEscaped, textEscaped))
 	default:
 		panic(fmt.Sprintf("Unsupported format %s", format))
 	}
-	return template.HTML(fmt.Sprintf(`<relative-time %s datetime="%s">%s</relative-time>`, strings.Join(attrs, " "), datetimeEscaped, textEscaped))
 }

templates/devtest/gitea-ui.tmpl

@@ -110,6 +110,16 @@
 		<div><gitea-origin-url data-url="/test/url"></gitea-origin-url></div>
 	</div>
 
+	<div>
+		<h1>GiteaLocaleDate</h1>
+		<div><gitea-locale-date date="2024-03-20" month="short"></gitea-origin-url></div>
+		<div><gitea-locale-date date="2024-03-20" month="long"></gitea-origin-url></div>
+		<div><gitea-locale-date date="2024-03-20" month="long" year=""></gitea-origin-url></div>
+		<div><gitea-locale-date date="2024-03-20" month="numeric" year=""></gitea-origin-url></div>
+		<div><gitea-locale-date date="2024-03-20" month="numeric" weekday="long"></gitea-origin-url></div>
+		<div>relative-time: <relative-time format="datetime" datetime="2024-03-20" month="numeric" weekday="long"></relative-time></div>
+	</div>
+
 	<div>
 		<h1>LocaleNumber</h1>
 		<div>{{ctx.Locale.PrettyNumber 1}}</div>

web_src/js/webcomponents/GiteaLocaleDate.js

@@ -0,0 +1,37 @@
+window.customElements.define('gitea-locale-date', class extends HTMLElement {
+  static observedAttributes = ['date', 'year', 'month', 'weekday', 'day'];
+
+  update = () => {
+    const year = this.getAttribute('year') ?? 'numeric';
+    const month = this.getAttribute('month') ?? 'short';
+    const weekday = this.getAttribute('weekday') ?? '';
+    const day = this.getAttribute('day') ?? 'numeric';
+    const lang = this.closest('[lang]')?.getAttribute('lang') ||
+      this.ownerDocument.documentElement.getAttribute('lang') ||
+      '';
+    const date = new Date(this.getAttribute('date'));
+
+    // apply negative timezone offset because `new Date()` above assumes that `yyyy-mm-dd` is
+    // a UTC date, so the local date will have a offset towards the user's timezone.
+    // Ref: https://stackoverflow.com/a/14569783/808699
+    const correctedDate = new Date(date.getTime() - date.getTimezoneOffset() * -60000);
+
+    this.textContent = correctedDate.toLocaleString(lang ?? [], {
+      ...(year && {year}),
+      ...(month && {month}),
+      ...(weekday && {weekday}),
+      ...(day && {day}),
+    });
+  };
+
+  attributeChangedCallback(_name, oldValue, newValue) {
+    if (oldValue === newValue || !this.initialized) return;
+    this.update();
+  }
+
+  connectedCallback() {
+    this.initialized = false;
+    this.update();
+    this.initialized = true;
+  }
+});

web_src/js/webcomponents/webcomponents.js

@@ -3,3 +3,4 @@ import './polyfill.js';
 
 import '@github/relative-time-element';
 import './GiteaOriginUrl.js';
+import './GiteaLocaleDate.js';