HTMLとjQeryで作る生年月日リストボックスのサンプル

年月日を選択式で指定する入力項目のサンプルです。
生年月日を想定して実行日から100年前まで範囲で50年前の年を初期値にしています。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>生年月日リストボックス</title>
        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <script>
            $(function(){
                var today = new Date();
                var end_year = today.getFullYear();
                var year = end_year - 100;
                while (year <= end_year) {
                    var year_str = String(year);
                    var s = (year == (end_year - 50)) ? " selected " : "";
                    $('#year_selector').append("<option value=\""+year_str+"\""+s+">"+year_str+"</option>");
                    year = year + 1;
                }
                for (var month=1; month <= 12; month++) {
                    var month_str = ("0" + String(month)).slice(-2);
                    $('#month_selector').append("<option value=\""+month_str+"\">"+month_str+"</option>");
                }
                $('#year_selector').change(function(){
                    $('#month_selector').change();
                });
                $('#month_selector').change(function(){
                    if ($('#year_selector').val() == "") return;
                    if ($('#month_selector').val() == "") return;
                    
                    var year = Number($('#year_selector').val());
                    var month = Number($('#month_selector').val());

                    var leap_year_flag = false;
                    if ((year % 400) == 0) {
                        leap_year_flag = true;
                    } else if ((year % 100) == 0) {
                        leap_year_flag = false;
                    } else if ((year % 4) == 0) {
                        leap_year_flag = true;
                    }
                    
                    var end_day = 31;
                    switch (month) {
                        case 2:
                            end_day = leap_year_flag ? 29 : 28;
                            break;
                        case 4:
                        case 6:
                        case 9:
                        case 11:
                            end_day = 30;
                            break;
                    }
                    $('#day_selector').children().remove();
                    for (var day=1; day <= end_day; day++) {
                        var day_str = ("0" + String(day)).slice(-2);
                        $('#day_selector').append("<option value=\""+day_str+"\">"+day_str+"</option>");
                    }
                });
                $('#month_selector').change();
            });
        </script>
    </head>
    <body>
        生年月日：
        <select id="year_selector">
        </select>
        <select id="month_selector">
        </select>
        <select id="day_selector">
        </select>
    </body>
</html>

コメント