使用JavaScript Date对象可动态显示格式化日期，如“YYYY年MM月”；HTML5的input[type=”date”]用于日期选择并提取年月；复杂场景可用Day.js等库；也可自定义无依赖格式化函数，按需选择方案。
在HTML中直接显示年月或完整的日期时间，通常需要借助JavaScript的Date对象，因为HTML本身只提供基础的输入控件，无法动态渲染格式化的时间。下面介绍几种常用方法来显示和格式化年月或日期时间。
1. 使用JavaScript Date对象获取当前年月
通过内置的Date对象可以轻松获取当前年份和月份，并格式化输出。
示例代码：
显示“YYYY年MM月”格式：
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1; // getMonth() 返回 0-11
const formatted = `${year}年${month.toString().padStart(2, ‘0’)}月`;
document.getElementById(“dateDisplay”).textContent = formatted;
这样就能在页面上显示如“2024年05月”的格式。
2. HTML5 日期输入控件（input type=”date”）
如果目标是让用户选择日期，HTML5 提供了原生支持：
立即学习“前端免费学习笔记（深入）”；
这个控件会显示一个日期选择器，返回 ISO 格式（YYYY-MM-DD）。你可以用 JavaScript 提取年月：
document.getElementById(“myDate”).addEventListener(“change”, function() {
const selectedDate = new Date(this.value);
if (!isNaN(selectedDate)) {
const y = selectedDate.getFullYear();
const m = selectedDate.getMonth() + 1;
alert(`${y}年${m}月`);
}
});
3. 使用第三方插件增强日期显示（如：Moment.js 或 Day.js）
对于更复杂的格式化需求，推荐使用轻量级库如 Day.js。
引入 Day.js：
格式化示例：
const today = dayjs();
const formatted = today.format(‘YYYY年MM月’);
document.write(formatted); // 输出：2024年05月
支持多种格式，比如 ‘YYYY-MM-DD HH:mm’、’MMM D, YYYY’ 等，非常灵活。
4. 自定义格式化函数（无依赖方案）
不想引入外部库？可以自己封装一个格式化函数：
function formatDate(date, format) {
const y = date.getFullYear();
const m = (date.getMonth() + 1).toString().padStart(2, ‘0’);
const d = date.getDate().toString().padStart(2, ‘0’);
return format.replace(‘YYYY’, y).replace(‘MM’, m).replace(‘DD’, d);
}
// 使用
const now = new Date();
document.write(formatDate(now, ‘YYYY年MM月’)); // 2024年05月
基本上就这些方法。根据项目复杂度选择合适的方式：简单展示用原生Date，频繁处理时间可引入Day.js，表单选择用input[type=”date”]。关键是按需格式化输出，确保用户看得明白。不复杂但容易忽略细节，比如月份从0开始、跨浏览器兼容性等。
以上就是html如何显示年月_HTML日期时间（Date对象/插件）显示与格式化方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1591049.html
微信扫一扫 
支付宝扫一扫 
