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

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

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

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

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

显示“YYYY年MM月”格式：
<div id="dateDisplay"></div>

<script>
  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;
</script>

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

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

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

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

<input type="date" id="myDate">

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

<script>
  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}月`);
    }
  });
</script>

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

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

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

34

查看详情

引入 Day.js：

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>

格式化示例：

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

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

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

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

<script>
  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月
</script>

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

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