【JavaScript】うるう年も考慮した年月日のselectタグを作る【検索時に】

作成日時：2023年12月20日 13時22分
最終更新日時：2023年12月20日 13時22分
Categories：フロントサイド
Tags： JavaScript tips 上級者向け

前に作った、jQueryの年月日検索の作りが甘かったので、JavaScriptで作り直した。

JavaScript

window.addEventListener("load" , () => {


    // 日付入力欄の初期化。
    const now       = new Date();
    const range     = 10;
    const now_year  = now.getFullYear();
    const now_month = now.getMonth() + 1;
    const now_day   = now.getDate();

    const years     = document.querySelectorAll("[name='year']");
    const months    = document.querySelectorAll("[name='month']");
    const days      = document.querySelectorAll("[name='day']");

    const ini       =  '<option value="">--</option>';

    // スプレッド構文を使用して配列に直し、イベントをセットする。
    // 年月日 全ての要素にオプションを追加している。

    for ( elem of years){
        elem.innerHTML  = ini;

        for (let i=now_year-range;i<now_year+range;i++){
            if (i===now_year){
                elem.innerHTML += `<option value="${i}" selected>${i}年</option>`;
            }
            else{
                elem.innerHTML += `<option value="${i}">${i}年</option>`;
            }
        }
        elem.addEventListener("input", (e) => { day_change(e) });
    };

    for ( elem of months){
        elem.innerHTML  = ini;

        for (let i=1;i<13;i++){
            if (i===now_month){
                elem.innerHTML += `<option value="${i}" selected>${i}月</option>`;
            }
            else{
                elem.innerHTML += `<option value="${i}">${i}月</option>`;
            }
        }
        elem.addEventListener("input", (e) => { day_change(e) });
    };

    for ( elem of days){
        elem.innerHTML  = ini;

        for (let i=1;i<32;i++){
            if (i===now_day){
                elem.innerHTML += `<option value="${i}" selected>${i}日</option>`;
            }
            else{
                elem.innerHTML += `<option value="${i}">${i}日</option>`;
            }
        }

        //elem.addEventListener("input", (e) => { day_change(e) });
    };

});

// 日付の変更時の対応
const day_change = (e) => {

    // 各月の日数
    const day_list      = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ];

    const year_elem     = e.currentTarget.parentNode.querySelector("[name='year']");
    const month_elem    = e.currentTarget.parentNode.querySelector("[name='month']");
    const day_elem      = e.currentTarget.parentNode.querySelector("[name='day']");

    const selected_day  = Number(day_elem.value);

    const year          = year_elem.value;
    const month         = month_elem.value;

    //うるう年かどうか判定。2月を29日に変更
    if ( year%4 == 0 ){ day_list[1] = 29; }

    //dayを初期化
    day_elem.innerHTML  = '<option value="">--</option>';

    // できれば、すでに選択されている日付でselectedする。
    for (let i=1;i<=day_list[month-1];i++){
        if (i===selected_day){
            day_elem.innerHTML += `<option value="${i}" selected>${i}日</option>`;
        }
        else{
            day_elem.innerHTML += `<option value="${i}">${i}日</option>`;
        }
    }
}

HTML

name属性を指定したselectタグさえあればOK

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Hello World test!!</title>
</head>
<body>

    <div>
        <select name="year" ></select>
        <select name="month"></select>
        <select name="day"  ></select>
    </div>

	<script src="script.js"></script>
</body>
</html>

とってもシンプル。

結論

まだまだ非効率な気もするが、とりあえず前のjQueryのコードよりは快適に動作できるだろう。

jQueryを使用しない点、idではなくname属性を使用している点も良い。