html如何显示年月_HTML日期时间（Date对象/插件）显示与格式化方法

使用JavaScript Date对象可动态显示格式化日期，如“YYYY年MM月”；HTML5的input[type="date"]用于日期选择并提取年月；复杂场景可用Day.js等库；也可自定义无依赖格式化函数，按需选择方案。

在HTML中直接显示年月或完整的日期时间，通常需要借助JavaScript的Date对象，因为HTML本身只提供基础的输入控件，无法动态渲染格式化的时间。下面介绍几种常用方法来显示和格式化年月或日期时间。

1. 使用JavaScript Date对象获取当前年月

通过内置的Date对象可以轻松获取当前年份和月份，并格式化输出。

显示“YYYY年MM月”格式：

这样就能在页面上显示如“2024年05月”的格式。

2. HTML5 日期输入控件（input type="date"）

如果目标是让用户选择日期，HTML5 提供了原生支持：

立即学习“前端免费学习笔记（深入）”；

这个控件会显示一个日期选择器，返回 ISO 格式（YYYY-MM-DD）。你可以用 JavaScript 提取年月：

<script><br> document.getElementById("myDate").addEventListener("change", function() {<br> const selectedDate = new Date(this.value);<br> if (!isNaN(selectedDate)) {<br> const y = selectedDate.getFullYear();<br> const m = selectedDate.getMonth() + 1;<br> alert(`${y}年${m}月`);<br> }<br> });<br> </script>

3. 使用第三方插件增强日期显示（如：Moment.js 或 Day.js）

对于更复杂的格式化需求，推荐使用轻量级库如 Day.js。

Prisma

Prisma是一款照片编辑工具，用户可以轻松地将照片转换成数字艺术。

92

查看详情

引入 Day.js：

格式化示例：

<script><br> const today = dayjs();<br> const formatted = today.format('YYYY年MM月');<br> document.write(formatted); // 输出：2024年05月<br> </script>

支持多种格式，比如 'YYYY-MM-DD HH:mm'、'MMM D, YYYY' 等，非常灵活。

4. 自定义格式化函数（无依赖方案）

不想引入外部库？可以自己封装一个格式化函数：

<script><br> function formatDate(date, format) {<br> const y = date.getFullYear();<br> const m = (date.getMonth() + 1).toString().padStart(2, '0');<br> const d = date.getDate().toString().padStart(2, '0');<br> return format.replace('YYYY', y).replace('MM', m).replace('DD', d);<br> }<br><br> // 使用<br> const now = new Date();<br> document.write(formatDate(now, 'YYYY年MM月')); // 2024年05月<br> </script>

基本上就这些方法。根据项目复杂度选择合适的方式：简单展示用原生Date，频繁处理时间可引入Day.js，表单选择用input[type="date"]。关键是按需格式化输出，确保用户看得明白。不复杂但容易忽略细节，比如月份从0开始、跨浏览器兼容性等。

以上就是html如何显示年月_HTML日期时间（Date对象/插件）显示与格式化方法的详细内容，更多请关注php中文网其它相关文章！