HTML添加下拉列表的时间

html-head中:

<script src="js/jq/jquery-3.5.1.min.js"></script>  /*注意该文件*/

<style>

.layui-input:focus,

.layui-textarea:focus {

border-color: #2989b6 !important;

}

</style>

body:{

  <div class="time">

                <p>开始时间：&nbsp&nbsp&nbsp <select id="years" οnchange="doChange1()"></select>

                    年<select id="months" οnchange="doChange1()"></select>

                    月<select id="dates"></select>日</p>

                <p>结束时间：&nbsp&nbsp&nbsp <select id="year" οnchange="doChange()"></select>

                    年<select id="month" οnchange="doChange()"></select>

                    月<select id="date"></select>日</p>

            </div>

}

js中：

var today = new Date();

var year = today.getFullYear();

var month = today.getMonth();

var date = today.getDate();

window.onload = function () {

    for (var i = year+100; i >= year-100; i--) {

        var option = new Option(i, i);

        // 如果年份等于当前年份 就默认选择

        if (i == year) {

            option.selected = true;

        }

        // 添加到id为year的select中

        ID('year').add(option);

    }

    // 循环月份

    for (var j = 1; j <= 12; j++) {

        var option = new Option(j, j);

        if ((j - 1) == month) {

            option.selected = true;

        }

        ID('month').add(option);

    }

    // 页面加载调用doChange事件

    doChange();

    // 循环年份并且显示到页面

    for (var i = year+100; i >= year - 100; i--) {

        var option = new Option(i, i);

        // 如果年份等于当前年份 就默认选择

        if (i == year) {

            option.selected = true;

        }

        // 添加到id为year的select中

        ID('years').add(option);

    }

    // 循环月份

    for (var j = 1; j <= 12; j++) {

        var option = new Option(j, j);

        if ((j - 1) == month) {

            option.selected = true;

        }

        ID('months').add(option);

    }

    // 页面加载调用doChange事件

    doChange1();

    $("select").next().remove();

}

 

function doChange() {

    // 把ID('date')中的option长度变为0

    ID('date').options.length = 0;

    var length = 31;

    // 获取月份

    var mon = ID('month').value;

    // 如果是2月

    if (mon == 2) {

        // 平年就是28

        length = 28;

        // 获取年份

        var num = ID('year').value;

        // 判断是不是闰年 闰年就是29

        if ((num % 4 == 0 && num % 100 != 0) || num % 400 == 0) {

            length++;

        }

    }

    // 定义正则判断月份 4 6 9 11 月

    var reg = / [469]|^11$/;

    // 符合条件就是30天

    if (reg.test(mon)) {

        length = 30;

    }

    // 然后循环 把值塞进去

    for (var k = 1; k <= length; k++) {

        var option = new Option(k, k);

        if (k == date && mon == month + 1) {

            option.selected = true;

        }

        ID('date').add(option);

    }

}

function doChange1() {

    // 把ID('dates')中的option长度变0

    ID('dates').options.length = 0;

    var length = 31;

    // 获取月份

    var mon = ID('months').value;

    // 如果是2月

    if (mon == 2) {

        // 平年就是28

        length = 28;

        // 获取年份

        var num = ID('years').value;

        // 判断是不是闰年 闰年就是29

        if ((num % 4 == 0 && num % 100 != 0) || num % 400 == 0) {

            length++;

        }

    }

    // 定义正则判断月份 4 6 9 11 月

    var reg = / [469]|^11$/;

    // 符合条件就是30天

    if (reg.test(mon)) {

        length = 30;

    }

    // 然后循环 把值塞进去

    for (var k = 1; k <= length; k++) {

        var option = new Option(k, k);

        if (k == date && mon == month + 1) {

            option.selected = true;

        }

        ID('dates').add(option);

    }

}

// 封装获取id的简化函数

function ID(id) {

    return document.getElementById(id);

}