日付を特定のフォーマットに変換したい | 日付・時間操作

日付を特定のフォーマットに変換したい | 日付・時間操作 | JavaScript 目的別リファレンス

目的別リファレンス

2024.09.222024.09.23

JavaScriptでは、Dateオブジェクトを使用して、日付を自由に操作し、特定のフォーマットに変換することができます。ここでは、日付を「YYYY/MM/DD」の形式に変換する例を紹介します。

実行例
HTMLとJavaScriptコード
仕組みについての詳細な解説
まとめ
Dateオブジェクトメソッドの機能一覧

実行例

以下は、現在の日付を「YYYY/MM/DD」形式に変換して表示するサンプルです。

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>
</head>
<body>

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

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

            // 年、月、日を取得し、それぞれを整形
            const year = now.getFullYear(); // 4桁の年
            const month = ('0' + (now.getMonth() + 1)).slice(-2); // 2桁の月
            const day = ('0' + now.getDate()).slice(-2); // 2桁の日付

            // フォーマットを整える
            const formattedDate = year + '/' + month + '/' + day;

            // HTMLに出力
            document.getElementById('formattedDate').textContent = 'フォーマットされた日付: ' + formattedDate;
        }
    </script>

</body>
</html>

仕組みについての詳細な解説

JavaScriptのDateオブジェクトは、日付や時間に関連する操作を行うために使用されます。Dateオブジェクトを使うと、現在の日付や時間を取得したり、特定のフォーマットに変換したりすることができます。ここでは、getFullYear()、getMonth()、getDate()メソッドを使って、日付を「YYYY/MM/DD」形式に変換しています。