日付を特定の形式(MM/DD/YYYY)に変換したい | 日付・時間操作 | JavaScript 目的別リファレンス

現在作成中です。今後加筆修正してまいります。
スポンサーリンク

このプログラムでは、JavaScriptのDateオブジェクトを使用して、現在の日付をMM/DD/YYYY形式に変換して表示します。padStart()メソッドを使って月や日を2桁に揃えます。

スポンサーリンク

使用するメソッド: getMonth(), getDate(), getFullYear()

JavaScriptのDateオブジェクトを使い、日付の各部分(年、月、日)を個別に取得し、フォーマットをMM/DD/YYYY形式に変換します。padStart()メソッドを使用することで、1桁の月や日を2桁に揃えます。

日付を特定の形式(MM/DD/YYYY)に変換するプログラム

以下のコードでは、現在の日付をMM/DD/YYYY形式に変換して表示しています。

HTMLとJavaScriptコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日付を特定の形式(MM/DD/YYYY)に変換する方法</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            padding: 20px;
        }
        pre {
            background: #f4f4f4;
            border-left: 3px solid #ccc;
            padding: 10px;
            margin: 20px 0;
        }
    </style>

    <script>
        window.onload = function() {
            // 現在の日付を取得
            const today = new Date();

            // 月、日、年を取得し、MM/DD/YYYY形式に変換
            const month = String(today.getMonth() + 1).padStart(2, '0'); // 月は0から始まるため+1
            const day = String(today.getDate()).padStart(2, '0');
            const year = today.getFullYear();

            // フォーマットをMM/DD/YYYYに変更
            const formattedDate = `${month}/${day}/${year}`;

            // 結果をHTMLに表示
            document.getElementById('formattedDateResult').textContent = `フォーマットされた日付: ${formattedDate}`;
        }
    </script>
</head>
<body>

    <h1>日付を特定の形式(MM/DD/YYYY)に変換する方法</h1>

    <div id="formattedDateResult"></div>

</body>
</html>

プログラムの解説

このプログラムでは、DateオブジェクトのgetMonth()getDate()getFullYear()メソッドを使用して日付の各要素を取得し、それらをMM/DD/YYYY形式にフォーマットしています。また、padStart()を使って1桁の月や日があった場合にも2桁で表示できるようにしています。

Dateオブジェクト メソッドの機能一覧

Dateオブジェクト メソッドの機能一覧 | JavaScript リファレンス
JavaScriptのDateオブジェクトは、日時を操作するために使用されるオブジェクトです。以下に、Dateオブジェクトのメソッドを種類ごとにアルファベット順にまとめています。 Dateオブジェクトのインスタンスメソッド メソッド名 説明と注意点 getDate() 日(1~31)を取得。 注意点: 月初や月末の値に...
Amazonロゴ
   
ad.価格範囲を指定して商品を探せます。セールで助かる便利ツール
目的別リファレンス
スポンサーリンク
このページをメモ、または、シェア