JS动态横排显示年月日

最新推荐文章于 2024-05-01 15:00:00 发布

wang的CSND

最新推荐文章于 2024-05-01 15:00:00 发布

阅读量1.5k

点赞数

分类专栏： Jquery 文章标签： js日期 select日期 js日期select

本文链接：https://blog.csdn.net/lb809663396/article/details/9366309

版权

Jquery 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

效果图：

不用在数据库存储这些日期数据，直接通过JS动态生成

代码如下：

<html>
<head>
    <title></title>
</head>
<body>
    <table>
        <tr>
            <td>
                <select id="year" οnchange="changeday()" name="year"><option value="">年</option></select>
                <select id="month" name="month" οnchange="changeday()"><option value="">月</option></select>
                <select id="day" name="day"><option value="">日</option></select>
                <script type="text/javascript" language="javascript">
                    var curdate = new Date();
                    var year = document.getElementById("year");
                    var month = document.getElementById("month");
                    var day = document.getElementById("day");
                    //绑定年份月分的默认
                    function add() {
                        var curyear = curdate.getFullYear();
                        var minyear = curyear - 80;
                        var maxyear = curyear;
                        for (maxyear; maxyear >= minyear; maxyear = maxyear - 1) {
                            year.options.add(new Option(maxyear, maxyear));
                        }
                        for (var mindex = 1; mindex <= 12; mindex++) {
                            month.options.add(new Option(mindex, mindex));
                        }
                    }

                    //判断是否是闰年
                    function leapyear(intyear) {
                        var result = false;
                        if (((intyear % 400 == 0) && (intyear % 100 != 0)) || (intyear % 4 == 0)) {
                            result = true;
                        }
                        else {
                            result = false;
                        }
                        return result;
                    }
                    //绑定天数
                    function addday(maxday) {
                        day.options.length = 1;
                        for (var dindex = 1; dindex <= maxday; dindex++) {
                            day.options.add(new Option(dindex, dindex));
                        }
                    }
                    function changeday() {
                        if (year.value == null || year.value == "") {
                            alert("请先选择年份！");
                            return false;
                        }
                        else {
                            if (month.value == 1 || month.value == 3 || month.value == 5 || month.value == 7 || month.value == 8 || month.value == 10 || month.value == 12) {
                                addday(31);
                            }
                            else {
                                if (month.value == 4 || month.value == 6 || month.value == 9 || month.value == 11) {
                                    addday(30);
                                }
                                else {
                                    if (leapyear(year.value)) {
                                        addday(29);
                                    }
                                    else {
                                        addday(28);
                                    }
                                }
                            }
                        }
                    }
                    window.onload = add;
                </script>
            </td>
        </tr>
    </table>
</body>
</html>

下面是封装好的，放到JS文件里

/****************************************横排日期（年月日）***********************************************/
//obj数组类型：yearID表示年ID，monthID表示月ID，dayID表示日ID
TimeInit = function (obj) {
    if (obj.yearID && obj.monthID && obj.dayID) {
        add(obj);
        $("#" + obj.yearID).change(function () { changeday(obj) });
        $("#" + obj.monthID).change(function () { changeday(obj) });
    }
    else if (obj.yearID && obj.monthID && obj.dayID==null) {
        add(obj);
    }
}
//给年月日赋值，strTime形式：yyyy-MM-dd
Time2Value = function (obj, strTime) {
    var yymmdd = strTime.split("-");
    if (obj.yearID && obj.monthID && obj.dayID) {
        $("#" + obj.yearID).val(yymmdd[0]);
        changeday(obj);
        $("#" + obj.monthID).val(yymmdd[1]);
        changeday(obj);
        $("#" + obj.dayID).val(yymmdd[2]);
    }
    else if (obj.yearID && obj.monthID && obj.dayID == null) {
        $("#" + obj.yearID).val(yymmdd[0]);       
        $("#" + obj.monthID).val(yymmdd[1]);
    }
};

//绑定年份月分的默认
add = function (obj) {
    var curdate = new Date();
    var year = $("#" + obj.yearID);
    var month = $("#" + obj.monthID);

    var curyear = curdate.getFullYear();
    var minyear = curyear - 80;
    var maxyear = curyear;
    for (maxyear; maxyear >= minyear; maxyear = maxyear - 1) {
        year.append("<option value='" + maxyear + "'>" + maxyear + "</option>");
    }
    for (var mindex = 1; mindex <= 12; mindex++) {
        var monthNum;
        if (mindex < 10)
            monthNum = "0" + mindex;
        else
            monthNum = mindex;
        month.append("<option value='" + monthNum + "'>" + monthNum + "</option>");
    }
}

//判断是否是闰年  
leapyear=function(intyear) {
    var result = false;
    if (((intyear % 400 == 0) && (intyear % 100 != 0)) || (intyear % 4 == 0)) {
        result = true;
    }
    else {
        result = false;
    }
    return result;
}
//绑定天数  
addday=function(dayid, maxday) {
    var day = document.getElementById(dayid);
    day.options.length = 1;
    for (var dindex = 1; dindex <= maxday; dindex++) {
        var dayNum;
        if (dindex < 10)
            dayNum = "0" + dindex;
        else
            dayNum = dindex;
        day.options.add(new Option(dayNum, dayNum));
    }
}
changeday = function (obj) {
    var year = $("#" + obj.yearID);
    var month = $("#" + obj.monthID);
    var day = obj.dayID;
    if (year.val() == null || year.val() == "") {
        alert("请先选择年份！");
        return false;
    }
    else {
        if (month.val() == 1 || month.val() == 3 || month.val() == 5 || month.val() == 7 || month.val() == 8 || month.val() == 10 || month.val() == 12) {
            addday(day, 31);
        }
        else {
            if (month.val() == 4 || month.val() == 6 || month.val() == 9 || month.val() == 11) {
                addday(day, 30);
            }
            else {
                if (leapyear(year.val())) {
                    addday(day, 29);
                }
                else {
                    addday(day, 28);
                }
            }
        }
    }
}

用法如下，引用一下

var objTime = { "yearID": "year", "monthID": "month", "dayID": "day" };
var strTime = $("#BirthdayTime").val();
TimeInit(objTime);
Time2Value(objTime, strTime);