HTML で今日の日付を取得する

HTMLには、現在の日付を自動的に表示する機能はありません。JavaScriptでDateを作成し、読者に適した形式にして、その文字列をHTML要素に挿入します。Dateオブジェクトは特定の時点を表し、getMonth()やtoLocaleDateString()などのメソッドによって表示方法が決まります。

HTMLでJavaScriptを使って現在の日付と時刻を表示する

Dateオブジェクトとそのメソッドが必要な場合は、new Date()を使います。newを付けずにDate()を呼び出すと、日時を表す文字列がその場で返されるため、getFullYear()などのメソッドは使えません。ページにcurrent-dateというIDの要素を配置し、同じ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()が返す月番号は0から始まるため、一般的な月番号にするには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から始まり、0は1月を表します。1桁の月や日をゼロ埋めすると、常に2桁で表示できます。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()を使います。このメソッドはDateの値をUTCの文字列表現にします。元の時点を変更したり、閲覧者のローカル時刻に変換したりするものではありません。

このセクションのコードと表示されるラベルや出力は英語のままです。

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

現在の値を表示する場合は、固定のISOタイムスタンプをnew Date()に置き換えます。同じ時点でも、UTCの日付とローカルタイムゾーンでの日付が異なることがあります。閲覧者向けの日付にはローカル形式、地域の慣例に合わせるにはロケール形式、時刻を一貫した基準で比較または共有するにはUTCを選んでください。UTCについて詳しくは、JavaScriptの日付をUTCに変換するを参照してください。