時間戳記 (Formatted Date)

  • 新提案
  • →
  • 封閉測試
  • →
  • 公開測試
  • →
  • 已穩定
成熟度說明
  • 新提案：未完成開發、請勿使用。
  • 封閉測試：開發暫時性完成，可使用。可能仍有親和力或其他使用上問題待透過實測發現。
  • 公開測試：開發暫時性完成，歡迎使用。具有完整親和力報告。
  • 已穩定：開發完成、歡迎使用。應無任何親和力或使用上問題。

自動格式化日期與時間

HTML
<time datetime="2026-08-20T06:30:00Z" data-formatted-date data-calendar="roc">2026-08-20 06:30 UTC</time>

將含時區的絕對時間顯示為完整日期、24 小時制時間與時區名稱，例如「台北標準時間」。預設使用繁體中文、西元曆與臺北時區。

使用

<time
  datetime="2026-08-20T06:30:00Z"
  data-formatted-date
  data-calendar="roc"
>
  2026-08-20 06:30 UTC
</time>
<script type="module" src="js/components/formatted-date.js"></script>
屬性必要性說明
data-formatted-date必要啟用自動格式化，不需填值
datetime必要絕對時間，需含 Z 或 ±HH:MM
data-locale選用顯示語系；預設沿用頁面或區塊的 lang，沒有則為 zh-TW
data-calendar選用可用值為 gregory、roc；預設 gregory
data-time-zone選用IANA 時區，預設 Asia/Taipei

請由同一筆時間資料產生 datetime 與 <time> 內的人可閱讀 UTC 文字，例如 2026-08-20 06:30 UTC。JavaScript 未載入或資料無效時，畫面仍會顯示這段文字。

限制

  • 腳本執行後才加入頁面的元素不會自動格式化。

親和力

  • 使用原生 <time>，不需額外設定 role 或 ARIA；元件會依顯示語系設定 lang。

參考