From 01c62bc6366417745587e2b61bb4ce617ce0b5f1 Mon Sep 17 00:00:00 2001 From: Yura Date: Mon, 29 Jun 2026 01:16:49 +0200 Subject: [PATCH] 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 | 2 +- .../modules/components/locale-datetime.js | 33 +++++-------------- 2 files changed, 10 insertions(+), 25 deletions(-) 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; } }); }