javascriptで日付セレクトボックスを作る

自分用のメモです下記のサイトを参考にしてつくった

日付セレクトボックスに初期値を設定するためには、 Counter関数を呼び出した後で、特定の年月日を選択状態にする処理を追加する必要があります。初期値を設定するには、option要素のselected属性をtrueに設定します。

以下のステップで初期値を設定する方法を示します。

showYearCounter関数に初期値を設定するための引数を追加します（例：defaultYear, defaultMonth, defaultDay）。
Counter関数に初期値を渡して、その値に対応するoption要素を選択状態にします。
Counter関数内で、渡された初期値（もしあれば）に基づいて、該当するoptionのselected属性をtrueに設定します。

<!DOCTYPE html>
<html>

<head>
    <title>日付選択</title>
    <script>
        // 数値カウンターまとめ
        function Counter(elementId, start, end, defaultValue) {
            const element = document.getElementById(elementId);
            element.innerHTML = '';
            for (let i = start; i <= end; i++) {
                let option = document.createElement("option");
                option.value = i;
                option.text = i;
                // 初期値が設定されていれば、該当するoptionを選択状態にする
                if (i === defaultValue) {
                    option.selected = true;
                }
                element.appendChild(option);
            }
        }

        // 年月はまとめてカウンターに渡して生成
        function showYearCounter(yearId, monthId, dayId, defaultYear, defaultMonth, defaultDay) {
            Counter(yearId, 1900, 2020, defaultYear);
            Counter(monthId, 1, 12, defaultMonth);
            showdayCounter(yearId, monthId, dayId, defaultDay);
        }

        // 日だけ年月で3パターンを判定してカウンター関数に投げる
        function showdayCounter(yearId, monthId, dayId, defaultDay) {
            let year = document.getElementById(yearId).value;
            let month = document.getElementById(monthId).value;
            let februaryDays = leap(year) ? 29 : 28;

            if (month == 2) {
                Counter(dayId, 1, februaryDays, defaultDay);
            } else if (month.match(/^(4|6|9|11)$/)) {
                Counter(dayId, 1, 30, defaultDay);
            } else {
                Counter(dayId, 1, 31, defaultDay);
            }
        }

        // 閏年判定
        function leap(year) {
            return (year % 4 == 0 && year % 100 != 0) || (year % 400 == 0);
        }

        // ここで初期値を設定して関数を呼び出す
        //showYearCounter('year', 'month', 'day', 2000, 1, 1);
    </script>
</head>

<body>
    <body onload="showYearCounter('year', 'month', 'day', 2000, 1, 1);">
        <select id="year" onchange="showdayCounter('year', 'month', 'day');"></select>年
        <select id="month" onchange="showdayCounter('year', 'month', 'day');"></select>月
        <select id="day"></select>日
    </body>
</html>

選択した内容を保存または表示させる必要がある場合はイベントリスナーを追加する必要がある

document.getElementById('year').addEventListener('change', updateDate);
document.getElementById('month').addEventListener('change', updateDate);
document.getElementById('day').addEventListener('change', updateDate);

function updateDate() {
    const year = document.getElementById('year').value;
    const month = document.getElementById('month').value;
    const day = document.getElementById('day').value;
    
    // 年月日が選択されていない場合は処理をしない
    if (!year || !month || !day) return;

    const formattedDate = `${year}年${month}月${day}日`;
    console.log(formattedDate); // コンソールに表示
    
    // 必要に応じて保存処理を追加
    // 例：DOMに表示する
    document.getElementById('selectedDate').textContent = formattedDate;
    
    // 例：ローカルストレージに保存
    localStorage.setItem('selectedDate', formattedDate);
}

// 初期日付設定後の変更イベントを発火させる
function initAndUpdateDate() {
    showYearCounter('year', 'month', 'day', 2000, 1, 1); // 初期日付を設定
    updateDate(); // 初期設定時に日付を更新
}

initAndUpdateDate();

masalibの日記

システム開発、運用と猫の写真ブログです

javascriptで日付セレクトボックスを作る