1. 方案设计
目标与约束
在现代前端开发场景中，需求往往是将当前日期以自定义格式直接渲染到HTML 元素中，而不引入任何外部库。/该方案的核心目标是实现纯 JavaScript的日期格式化与渲染流程，确保浏览器端即可完成渲染。
为了实现灵活的显示效果，我们需要一个可扩展的格式化字符串方案，支持 YYYY、MM、DD、HH、mm、ss 等可组合的占位符，以及对 零填充、24/12 小时制等常见场景的处理。
技术路线
本方案采用一个核心的formatDate函数作为日期格式化的核心模块，外部通过数据属性驱动格式化行为。
通过在需要显示日期的HTML 元素上使用 data-format 属性，可以直接指定要呈现的格式，例如“YYYY-MM-DD”或“YYYY/MM/DD hh:mm:ss”。
2. 核心实现
formatDate 的设计要点
设计时要把日期对象拆解成年、月、日、时、分、秒等组成部分，并用占位符替换来生成目标字符串。该过程应具备清晰的实现逻辑、良好的可读性与较高的执行效率。
关键点包括：零填充、24 小时制与 12 小时制的切换、以及对可选格式项的容错处理，以便覆盖常见的日期显示需求。
下面给出一个可直接使用的最小实现，支持通用格式占位符。
function pad(n, w = 2) {const s = String(n);return s.length >= w ? s : '0'.repeat(w - s.length) + s;
}function formatDate(date, format) {const map = {'YYYY': date.getFullYear(),'MM': pad(date.getMonth() + 1),'DD': pad(date.getDate()),'HH': pad(date.getHours()),'mm': pad(date.getMinutes()),'ss': pad(date.getSeconds()),'hh': pad((date.getHours() % 12) || 12),'A': date.getHours() >= 12 ? 'PM' : 'AM',};// 替换长占位符优先，确保 YYYY, MM, DD, HH, mm, ss 等不冲突return Object.keys(map).reduce((acc, key) => acc.replaceAll(key, map[key]), format);
}// 直接导出方便引用
动态绑定与渲染
通过数据属性驱动，我们可以对页面中的任意元素应用日期格式，从而实现统一的显示风格。
核心步骤包括：获取格式字符串、计算当前日期、以及将结果写回到元素的文本内容中。
function applyDateFormats(root = document) {const elements = root.querySelectorAll('[data-format]');elements.forEach(el => {const fmt = el.getAttribute('data-format');const now = new Date();el.textContent = formatDate(now, fmt);});
}// 初始执行
document.addEventListener('DOMContentLoaded', () => {applyDateFormats();
});// 如果你需要实时更新，可以设置一个定时器
// setInterval(() => applyDateFormats(), 1000);
3. 实战示例与应用
在页面中应用自定义日期格式
通过在页面元素上设置 data-format 属性，可以实现多样化的日期显示，例如 YYYY-MM-DD、YYYY/MM/DD HH:mm 等。
这种做法的好处在于结构化标记与展示格式分离，便于团队协作与后续维护，还能通过简单的属性变更来调整呈现效果。
以下给出一个最小可用的实战示例，展示如何在网页加载时渲染并按照自定义格式显示日期。
日期格式化示例
今天的日期是：—
当前时间（带时分秒）：—
