タイムスタンプを年月日形式に変換したい | 日付・時間操作 | JavaScript 目的別リファレンス

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

このプログラムでは、JavaScriptのDateオブジェクトを使用して、指定されたタイムスタンプを年月日形式に変換し、getFullYear()getMonth()getDate()を用いてフォーマットします。

スポンサーリンク

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

JavaScriptのDateオブジェクトを使い、タイムスタンプから年、月、日を取得し、padStart()でゼロ埋めをして年月日形式(YYYY/MM/DD)に変換します。

タイムスタンプを年月日形式に変換するプログラム

以下のコードでは、タイムスタンプ(1609459200000)を2021年1月1日(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>
    <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() {
            // タイムスタンプを取得(例: 1609459200000 は2021年1月1日)
            const timestamp = 1609459200000;

            // タイムスタンプを日付オブジェクトに変換
            const date = new Date(timestamp);

            // 年月日形式に変換(YYYY/MM/DD)
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月は0から始まるので+1
            const day = String(date.getDate()).padStart(2, '0');

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

    <h1>タイムスタンプを年月日形式に変換する方法</h1>

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

</body>
</html>

プログラムの解説

このプログラムでは、指定されたタイムスタンプをDateオブジェクトに変換し、その後getFullYear()getMonth()getDate()メソッドを使って年、月、日を取得します。また、月と日を2桁に揃えるためにpadStart()を使用し、YYYY/MM/DD形式で表示します。

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

Dateオブジェクト メソッドの機能一覧 | JavaScript リファレンス
JavaScriptのDateオブジェクトは、日時を操作するために使用されるオブジェクトです。以下に、Dateオブジェクトのメソッドを種類ごとにアルファベット順にまとめています。 Dateオブジェクトのインスタンスメソッド メソッド名 説明と注意点 getDate() 日(1~31)を取得。 注意点: 月初や月末の値に...