diff --git a/_includes/datetime.html b/_includes/datetime.html
index b07b132aa..ea50087a4 100644
--- a/_includes/datetime.html
+++ b/_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"
diff --git a/_javascript/modules/components/locale-datetime.js b/_javascript/modules/components/locale-datetime.js
index eb75626dd..c93475e55 100644
--- a/_javascript/modules/components/locale-datetime.js
+++ b/_javascript/modules/components/locale-datetime.js
@@ -6,24 +6,14 @@
 
 /* A tool for locale datetime */
 class LocaleHelper {
-  static get attrTimestamp() {
-    return 'data-ts';
-  }
-
-  static get attrDateFormat() {
-    return 'data-df';
-  }
+  static datetimeAttr = 'datetime';
 
   static get locale() {
     return document.documentElement.getAttribute('lang').substring(0, 2);
   }
 
-  static getTimestamp(elem) {
-    return Number(elem.getAttribute(this.attrTimestamp)); // unix timestamp
-  }
-
-  static getDateFormat(elem) {
-    return elem.getAttribute(this.attrDateFormat);
+  static getDatetime(elem) {
+    return elem.getAttribute(this.datetimeAttr);
   }
 }
 
@@ -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 text = date.format(LocaleHelper.getDateFormat(elem));
-      elem.textContent = text;
-      elem.removeAttribute(LocaleHelper.attrTimestamp);
-      elem.removeAttribute(LocaleHelper.attrDateFormat);
+      const date = dayjs(LocaleHelper.getDatetime(elem));
+      elem.textContent = date.format(elem.dataset.df);
+      delete elem.dataset.df;
 
       // setup tooltips
-      if (
-        elem.hasAttribute('data-bs-toggle') &&
-        elem.getAttribute('data-bs-toggle') === 'tooltip'
-      ) {
+      if ('bsToggle' in elem.dataset && elem.dataset.bsToggle === '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;
       }
     });
 }