日付が過去か未来かを判定したい | 日付・時間操作

日付が過去か未来かを判定したい | 日付・時間操作 | JavaScript 目的別リファレンス

目的別リファレンス

2024.09.222024.09.23

このプログラムでは、指定された日付「2023年12月25日」と今日の日付を比較し、指定された日付が過去か未来かを判定します。例えば、未来の日付であれば「指定した日付は未来です。」、過去の日付であれば「指定した日付は過去です。」という結果を表示します。

INDEX

使用するオブジェクト: Dateオブジェクト
指定した日付が過去か未来かを判定するプログラム
1. HTMLとJavaScriptコード
2. プログラムの解説
Dateオブジェクトメソッドの機能一覧

使用するオブジェクト: Dateオブジェクト

JavaScriptのDateオブジェクトを使用して、現在の日付と指定した日付を取得し、それらを比較することで、過去か未来かを判定します。

指定した日付が過去か未来かを判定するプログラム

以下のコードでは、指定した日付「2023年12月25日」が過去か未来かを判定し、その結果を表示しています。

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() {
            // 判定したい日付を指定（例：2023年12月25日）
            const targetDate = new Date('2023-12-25');

            // 今日の日付を取得
            const today = new Date();

            // 日付が過去か未来かを判定
            const resultText = targetDate > today ? "指定した日付は未来です。" : "指定した日付は過去です。";

            // 結果をHTMLに表示
            document.getElementById('dateCheck').textContent = `判定結果: ${resultText}`;
        }
    </script>
</head>
<body>

    <h1>日付が過去か未来かを判定する方法</h1>

    <div id="dateCheck"></div>

</body>
</html>