在 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() 標示為「上次更新」。若現有專案已載入 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。