fix(dom): add missing datetime attribute on time element (#2759)

The datetime attribute was missing from the time element, which is
recommended for semantic HTML. Add it using the date_to_xmlschema
Liquid filter to ensure proper ISO 8601 format.

_includes/datetime.html

@@ -10,7 +10,7 @@
   {% if include.class %}
     class="{{ include.class }}"
   {% endif %}
-  data-ts="{{ include.date | date: '%s' }}"
+  datetime="{{ include.date | date_to_xmlschema }}"
   data-df="{{ df_dayjs }}"
   {% if include.tooltip %}
     data-bs-toggle="tooltip" data-bs-placement="bottom"

_javascript/modules/components/locale-datetime.js

@@ -6,24 +6,14 @@
 
 /* A tool for locale datetime */
 class LocaleHelper {
-  static get attrTimestamp() {
+  static datetimeAttr = 'datetime';
-    return 'data-ts';
-  }
-
-  static get attrDateFormat() {
-    return 'data-df';
-  }
 
   static get locale() {
     return document.documentElement.getAttribute('lang').substring(0, 2);
   }
 
-  static getTimestamp(elem) {
+  static getDatetime(elem) {
-    return Number(elem.getAttribute(this.attrTimestamp)); // unix timestamp
+    return elem.getAttribute(this.datetimeAttr);
-  }
-
-  static getDateFormat(elem) {
-    return elem.getAttribute(this.attrDateFormat);
   }
 }
 
@@ -32,22 +22,17 @@ export function initLocaleDatetime() {
   dayjs.extend(window.dayjs_plugin_localizedFormat);
 
   document
-    .querySelectorAll(`[${LocaleHelper.attrTimestamp}]`)
+    .querySelectorAll(`[${LocaleHelper.datetimeAttr}]`)
     .forEach((elem) => {
-      const date = dayjs.unix(LocaleHelper.getTimestamp(elem));
+      const date = dayjs(LocaleHelper.getDatetime(elem));
-      const text = date.format(LocaleHelper.getDateFormat(elem));
+      elem.textContent = date.format(elem.dataset.df);
-      elem.textContent = text;
+      delete elem.dataset.df;
-      elem.removeAttribute(LocaleHelper.attrTimestamp);
-      elem.removeAttribute(LocaleHelper.attrDateFormat);
 
       // setup tooltips
-      if (
+      if ('bsToggle' in elem.dataset && elem.dataset.bsToggle === 'tooltip') {
-        elem.hasAttribute('data-bs-toggle') &&
-        elem.getAttribute('data-bs-toggle') === 'tooltip'
-      ) {
         // see: https://day.js.org/docs/en/display/format#list-of-localized-formats
         const tooltipText = date.format('llll');
-        elem.setAttribute('data-bs-title', tooltipText);
+        elem.dataset.bsTitle = tooltipText;
       }
     });
 }