JavaScriptで今日の日付をDD/MM/YYYY形式で取得・入力する方法

この記事では、JavaScriptで現在の日付をdd/mm/yyyy形式で取得し、HTMLの<input>要素に設定する３つの方法を解説します。日付形式を統一することで、ユーザーエクスペリエンスを向上させ、データ処理を容易にすることができます。

toLocaleDateString() メソッドを使う

toLocaleDateString()メソッドは、指定されたロケールに基づいて日付を整形します。イギリス（en-GB）ロケールを指定すると、dd/mm/yyyy形式で日付が返されます。

new Date().toLocaleDateString('en-GB');

使い方:

1. toLocaleDateString('en-GB')で今日の日付を取得。
2. 取得した日付を<input>要素に設定。

この方法の利点は、コードが簡潔で読みやすいことです。

toISOString() メソッドと文字列操作を使う

toISOString()メソッドは日付をISO 8601形式（yyyy-mm-ddThh:mm:ss.sssZ）で返します。この文字列を分割し、順番を入れ替えてdd/mm/yyyy形式に変換します。

new Date().toISOString().slice(0, 10).split('-').reverse().join('/');

手順:

1. toISOString()で日付を取得。
2. slice(0, 10)で日付部分を抽出。
3. split('-')で-で分割。
4. reverse()で配列の順番を反転。
5. join('/')で/で結合。

より細かい制御が必要な場合に有効です。

Moment.jsライブラリを使う

Moment.jsは、日付操作を簡単にするJavaScriptライブラリです。format()メソッドを使うと、任意の日付形式で日付を取得できます。

moment().format("DD/MM/YYYY");

手順:

1. Moment.jsをインストールまたはCDNで読み込む。
2. moment()で現在の日付を取得。
3. format("DD/MM/YYYY")でdd/mm/yyyy形式に整形。

Moment.jsは多機能で、日付の加算・減算なども容易に行えます。

まとめ

JavaScriptで日付をdd/mm/yyyy形式で取得し、<input>要素に設定する３つの方法を紹介しました。それぞれの方法にはメリット・デメリットがあるため、プロジェクトの要件に合わせて最適な方法を選択してください。日付形式を統一することで、より洗練されたウェブアプリケーションを開発できます。

キーワード: JavaScript, 日付, フォーマット, toLocaleDateString, toISOString, Moment.js, DD/MM/YYYY, ウェブ開発