在 HTML 中获取今天的日期

HTML 本身没有内建的实时日期显示功能。可以使用 JavaScript 创建一个 Date，按读者需要格式化日期，并将结果文本放入 HTML 元素中。Date 对象表示一个时间点；getMonth() 和 toLocaleDateString() 等方法决定如何呈现该值。

在 HTML 中使用 JavaScript 显示当前日期和时间

需要使用 Date 对象及其方法时，请使用 new Date()。不加 new 调用 Date() 会立即返回日期时间字符串，因此不能再对其调用 getFullYear() 等方法。在页面中放置一个 ID 为 current-date 的元素，然后选中同一个 ID 并设置它的 textContent：

本节中的代码以及显示的标签或输出仍为英文。

<p>Current date and time: <span id="current-date"></span></p>
<script>
  const currentDate = new Date();
  document.getElementById("current-date").textContent = currentDate.toString();
</script>

由于脚本写在该元素之后，运行 getElementById() 时元素已经存在。显示的值取决于脚本的运行时间和设备所在的本地时区。对于纯日期文本，请使用 textContent；这样可以避免将该值当作 HTML 标记处理。本文的文章运行环境不会执行这个浏览器页面示例。

如需更全面地了解如何获取当前值，请参阅使用 JavaScript 获取当前日期。

在 HTML 中将日期格式化为月/日/年

若要显示美式数字日期，请根据日期的各个部分构造字符串。getMonth() 返回从零开始的月份，因此要加 1 才能得到常用的月份数字。getDate() 返回一个月中的日期，getFullYear() 则返回年份。此示例使用固定日期，便于调整格式逻辑；若要显示今天的本地日期，可将它替换为 new Date()。

本节中的代码以及显示的标签或输出仍为英文。

const page = { textContent: "" };
const document = { getElementById: () => page };
const date = new Date(2024, 0, 5);
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");
const year = date.getFullYear();
document.getElementById("current-date").textContent = `${month}/${day}/${year}`;
console.log(page.textContent);

构造函数的月份参数也从零开始：0 表示一月。补零可让个位数的月份和日期统一显示为两位数。month/day/year 的顺序只是一种显示惯例，并非通用日期格式；请根据读者习惯选择合适的顺序。如需了解其他格式，请参阅 JavaScript 日期格式化。

使用 toLocaleDateString() 按地区格式化日期

使用 toLocaleDateString() 可调用浏览器的国际化功能，将日期转换为字符串。传入 en-US 或 en-GB 等地区标记，可明确指定格式惯例；还可以提供选项来控制显示哪些部分。若未指定地区，输出可能会遵循浏览器环境的设置，因此不同读者看到的结果可能不同。

本节中的代码以及显示的标签或输出仍为英文。

const date = new Date(2024, 0, 5);
const options = { year: "numeric", month: "long", day: "numeric" };
const formatted = date.toLocaleDateString("en-US", options);
console.log(formatted);

将地区标记改为 en-GB，即可请求使用英式英语惯例。具体措辞和标点由运行环境的地区数据决定；不要假设结果字符串具有固定格式并据此解析。当目标是面向读者显示符合语言和地区惯例的日期，而非生成机器可读的日期时，适合使用 toLocaleDateString()。

添加星期几或更易读的日期格式

可以直接通过地区格式化选项加入星期几。这样无需单独维护星期名称数组，措辞和顺序也会由所选地区决定。

本节中的代码以及显示的标签或输出仍为英文。

const date = new Date(2024, 0, 5);
const options = { weekday: "long", year: "numeric", month: "long", day: "numeric" };
console.log(date.toLocaleDateString("en-US", options));

将相同选项与其他地区标记（例如 fr-FR）搭配，即可生成本地化的长日期格式。若只需要简短的数字日期，可省略 weekday，并使用数字月份和日期选项。即使请求的地区和选项相同，格式化后的文本也可能随着浏览器地区数据变化而不同。

使用 Moment.js 获取其他日期和时间格式

Moment.js 是可选的库，基本日期显示并不需要它。调用其 API 之前，先加载 Moment.js；使用本地化格式时，还要加载相应的地区数据。以下调用仅用于说明用法，页面必须包含该依赖：moment().format("YYYY-MM-DD") 会格式化日历日期；moment().fromNow() 会显示相对于当前时刻的时间；加载法语地区数据后，moment.locale("fr"); moment().format("LL") 会请求法语长日期格式；moment().calendar() 则会根据日期与当前时间的远近选择措辞。

相对时间描述的是一段时间间隔，并不代表页面的发布日期或更新日期。除非其值来自真实保存的更新时间戳，否则不要将 moment().fromNow() 标为“Last updated”。对于已包含 Moment.js 的项目，它可能很有用；而简单的日期显示可以使用内建的 Date API，避免增加依赖。

使用 toUTCString() 将日期转换为 UTC

当统一的时间标准比查看者的本地时间更有用时，可以使用 toUTCString()。它会以 UTC 返回 Date 值的字符串表示；不会改变底层时间点，也不会将其转换为查看者的本地时间。

本节中的代码以及显示的标签或输出仍为英文。

const date = new Date("2024-01-05T12:30:00Z");
console.log(date.toUTCString());

若要使用实时值，请将固定的 ISO 时间戳替换为 new Date()。同一时间点对应的 UTC 日期，可能与某个本地时区的日期相差一天。面向查看者显示日期时使用本地格式；需要遵循地区惯例时使用地区格式；需要比较或共享统一时间基准时使用 UTC。如需了解相关内容，请参阅使用 JavaScript 将日期转换为 UTC。