jQuery日期联动控件

PROMULGATOR

王圣德?中选技术部

广东省深圳市天威视讯

← div模拟下拉框

→ 自己学习交流，写的简单的九宫格抽奖效果

相关代码

jQuery日期联动控件

js提取身份证年月日,性别

DIY二级联动

省级二级联动

jQ省市区三级联动

省级联动二联动

Html

Css

Js


    生日:

select {
	background-color:#fff;
}
.Birthday {
	width:27%;
	border:1px solid #ccc;
	height:27px;
}

var date = new Date; //获取当前时间
var year = date.getFullYear(); //获取当前年份
var Month = date.getMonth() + 1;
Month = (Month < 10 ? "0" + Month : Month);
var Day = date.getDate();
Day = (Day < 10 ? "0" + Day : Day.toString());
//页面初始化
$(function() {
    SetYear();
    SetMonth();
    SetDay();
    $(".Year").change(function() {
        SetDay();
    })
    $(".Month").change(function() {
        SetDay();
    })
});

//初始化年份
function SetYear() {
    $(".Year").empty(); //初始化，清空内容
    var aa = "@Model.BirthDate.Year";
    var option = "";
    for (var i = year; i >= year - 60; i--) {
        $(".Year").append($("<option>").val(i).text(i))
    }
    if (aa.length > 0) {
        $(".Year").val(aa); //通过value值，设置对应的选中项
    } else {
        $(".Year").val(year); //通过value值，设置对应的选中项
    }
}

function SetMonth() {
    $(".Month").empty(); //初始化，清空内容
    var aa = "@Model.BirthDate.Month";

var option = "";
    for (var i = 1; i <= 12; i++) {
        i = (i < 10 ? "0" + i : i.toString());
        $(".Month").append($("<option>").val(i).text(i))
    }
    if (aa.length > 0) {
        aa = (aa < 10 ? "0" + aa : aa.toString());
        $(".Month").val(aa);
    } else {
        $(".Month").val(Month);
    }
}

function SetDay() {
    $(".Day").empty(); //初始化，清空内容
    var aa = "@Model.BirthDate.Day";
    var selectMonth = $(".Month option:selected").val(); //获取当前选中的月份
    var selectYear = $(".Year option:selected").val(); //获取当前选中的年份
    var d = new Date(selectYear, selectMonth, 0); //jq函数:获取某年某个月的天数
    var DayCount = d.getDate(); //某月的天数
    for (var i = 1; i <= DayCount; i++) { //循环当月最大天数
        i = (i < 10 ? "0" + i : i.toString());
        $(".Day").append($("<option>").val(i).text(i)) //添加选项
    }
    if (aa.length > 0) {
        aa = (aa < 10 ? "0" + aa : aa.toString());
        $(".Day").val(aa);
    } else {
        $(".Day").val(Day); //默认选中当前日期
    }

}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

jQuery日期联动控件



代码描述：代码很少，日期三级联动控件（自动判断闰年）

主要使用 new date(year, month, day)函数,花几分钟就能看懂，挺简单的。

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery日期联动控件-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号