日別アーカイブ: 2026年5月23日

<div class="date-counter-container">
    <!-- 冒頭の解説・サンプル表示（JSで自動切り替え） -->
    <div class="counter-explanation">
        <p><strong>【現在のシミュレーション表示】</strong></p>
        <p id="explanationText">読み込み中...</p>
        <p id="sampleDisplay" class="sample-display">計算中...</p>
    </div>

    <hr class="counter-divider">

    <!-- 入力フォームと結果表示 -->
    <div class="counter-input-section">
        <label for="targetDate">ターゲットの日付を選択または入力してください：</label>
        <input type="date" id="targetDate" class="counter-date-input">
    </div>

    <div class="counter-result-section">
        <p id="countdownResult" class="counter-result-text">日付を入力するとここに結果が表示されます。</p>
    </div>
</div>

<!-- 簡易的なデザイン調整用のスタイル（CSS） -->
<style>
.date-counter-container {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    font-family: sans-serif;
}
.counter-explanation {
    background-color: #fff;
    border-left: 4px solid #0073aa;
    padding: 10px 15px;
    margin-bottom: 15px;
    font-size: 0.95em;
}
.sample-display {
    color: #c9302c;
    font-weight: bold;
    font-size: 1.1em;
    margin-top: 5px;
}
.counter-divider {
    border: 0;
    border-top: 1px solid #ddd;
    margin: 20px 0;
}
.counter-input-section {
    margin-bottom: 15px;
}
.counter-date-input {
    padding: 8px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.counter-result-section {
    background-color: #fff;
    border: 1px dashed #bbb;
    padding: 15px;
    text-align: center;
    min-height: 50px;
}
.counter-result-text {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
    margin: 0;
}
</style>

<!-- 計算用のプログラム（JavaScript） -->
<script>
// 共通の期間計算関数
function calculateDateDifference(startDate, endDate) {
    const msDiff = endDate.getTime() - startDate.getTime();
    const totalDays = Math.ceil(msDiff / (1000 * 60 * 60 * 24));

    if (totalDays < 0) {
        return { totalDays, text: "過去の日付が指定されています。", error: true };
    }

    let diffYears = endDate.getFullYear() - startDate.getFullYear();
    let diffMonths = endDate.getMonth() - startDate.getMonth();
    let diffDays = endDate.getDate() - startDate.getDate();

    if (diffDays < 0) {
        const previousMonthEnd = new Date(endDate.getFullYear(), endDate.getMonth(), 0).getDate();
        diffDays += previousMonthEnd;
        diffMonths--;
    }

    if (diffMonths < 0) {
        diffMonths += 12;
        diffYears--;
    }

    const formattedTarget = `${endDate.getFullYear()}/${String(endDate.getMonth() + 1).padStart(2, '0')}/${String(endDate.getDate()).padStart(2, '0')}`;

    return {
        text: `${formattedTarget}まで、${diffYears}年${diffMonths}月${diffDays}日（${totalDays}日）`,
        error: false
    };
}

// ページ読み込み時の自動判定・シミュレーション処理
window.addEventListener('DOMContentLoaded', function() {
    const now = new Date();
    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());

    // ルール判定用の基準日程
    const limit1 = new Date(2026, 4, 26); // 2026/05/26 (月は0始まり、4=5月)
    const limit2 = new Date(2026, 5, 11); // 2026/06/11 (5=6月)

    let expText = "";
    let resultObj = {};

    // 今日の日付に基づいてターゲット（目標日）を自動切り替え
    if (today <= limit1) {
        // ルール1: 2026/05/26まで ➔ 2026/05/26までを計算
        const targetDate = limit1;
        expText = `現在は「2026/05/26まで」の期間です。本日（${today.getFullYear()}/${today.getMonth()+1}/${today.getDate()}）を起点として自動計算しています。`;
        resultObj = calculateDateDifference(today, targetDate);
    } else if (today <= limit2) {
        // ルール2: 2026/06/11まで ➔ 2036/06/11までを計算
        const targetDate = new Date(2036, 5, 11); // 2036/06/11
        expText = `現在は「2026/06/11まで」の期間です。ルールに基づき、未来の「2036/06/11まで」の残り期間を、本日を起点に自動計算しています。`;
        resultObj = calculateDateDifference(today, targetDate);
    } else {
        // ルール3: それ以降 ➔ 翌年の元旦までを計算
        const targetDate = new Date(today.getFullYear() + 1, 0, 1); // 翌年1/1
        expText = `2026年6月12日を過ぎたため、翌年の元旦（${targetDate.getFullYear()}/01/01）までの期間を表示しています。本日を起点として自動計算しています。`;
        resultObj = calculateDateDifference(today, targetDate);
    }

    // 画面の解説枠に反映
    document.getElementById('explanationText').innerText = expText;
    document.getElementById('sampleDisplay').innerText = resultObj.text;
});

// 下部の自由入力フォームの処理
document.getElementById('targetDate').addEventListener('input', function() {
    const inputVal = this.value;
    if (!inputVal) {
        document.getElementById('countdownResult').innerText = "日付を入力するとここに結果が表示されます。";
        return;
    }

    const parts = inputVal.split('-');
    const endDate = new Date(parseInt(parts[0], 10), parseInt(parts[1], 10) - 1, parseInt(parts[2], 10));
    const now = new Date();
    const startDate = new Date(now.getFullYear(), now.getMonth(), now.getDate());

    const result = calculateDateDifference(startDate, endDate);
    document.getElementById('countdownResult').innerText = result.text;
});
</script>