日付のフォーマットをゼロ埋め | 日付・時間操作

日付のフォーマットをゼロ埋め | 日付・時間操作 | JavaScript 目的別リファレンス

目的別リファレンス

2024.09.222024.09.23

このプログラムでは、JavaScriptのpadStart()メソッドを使用して、日付の月や日をゼロ埋めし、常に2桁で表示します。これにより、「1月2日」などの日付を「01/02/2023」のようにフォーマットします。

使用するメソッド: padStart()
日付をゼロ埋めしてフォーマットするプログラム
1. HTMLとJavaScriptコード
2. プログラムの解説
Dateオブジェクトメソッドの機能一覧

使用するメソッド: padStart()

padStart()メソッドは、文字列の先頭に指定した文字を追加し、指定された長さまで埋めることができます。ここでは2桁のゼロ埋めを行っています。

日付をゼロ埋めしてフォーマットするプログラム

以下のコードでは、現在の日付を「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>日付のフォーマットでゼロ埋めする方法（例：01/02/2023）</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();

            // ゼロ埋めフォーマット関数
            function zeroPad(num) {
                return num.toString().padStart(2, '0');
            }

            // 年月日をゼロ埋めしてフォーマット
            const day = zeroPad(today.getDate());
            const month = zeroPad(today.getMonth() + 1); // 月は0から始まるため+1
            const year = today.getFullYear();

            // 結果をHTMLに表示
            const formattedDate = `${month}/${day}/${year}`;
            document.getElementById('formattedDate').textContent = `ゼロ埋めした日付: ${formattedDate}`;
        }
    </script>
</head>
<body>

    <h1>日付のフォーマットでゼロ埋めする方法（例：01/02/2023）</h1>

    <div id="formattedDate"></div>

</body>
</html>