日付の書式をカスタマイズして表示したい | 日付・時間操作

日付の書式をカスタマイズして表示したい | 日付・時間操作 | JavaScript 目的別リファレンス

目的別リファレンス

2024.09.222024.09.23

このプログラムでは、JavaScriptのDateオブジェクトを使用して、現在の日付から月と日だけを抽出し、カスタムフォーマットで表示します。getMonth()とgetDate()メソッドを使用して必要な部分だけを取得しています。

使用するメソッド: getMonth(), getDate()
月日だけを表示するプログラム
1. HTMLとJavaScriptコード
2. プログラムの解説
Dateオブジェクトメソッドの機能一覧

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

DateオブジェクトのgetMonth()メソッドは0から11までの値を返すため、表示の際には+1する必要があります。getDate()メソッドを使用して月の日付部分を取得し、それらを組み合わせて月日だけを表示します。

月日だけを表示するプログラム

以下のコードでは、現在の日付から月と日だけを抽出し、表示しています。

HTMLとJavaScriptコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日付の書式をカスタマイズして表示する方法（例：月日だけを表示）</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();

            // 月日だけを表示するためにフォーマット
            const month = today.getMonth() + 1; // 月は0から始まるため+1
            const day = today.getDate();

            // フォーマットした結果をHTMLに表示
            const formattedDate = `${month}月${day}日`;
            document.getElementById('customDate').textContent = `月日だけを表示: ${formattedDate}`;
        }
    </script>
</head>
<body>

    <h1>日付の書式をカスタマイズして表示する方法（例：月日だけを表示）</h1>

    <div id="customDate"></div>

</body>
</html>