日期联动

本文介绍了一个基于JavaScript的日期联动选择器实现方案。该选择器能够根据所选年份和月份动态更新对应的天数选项,并考虑了闰年和平年的差异。通过简单的HTML结构结合JavaScript逻辑,实现了年、月、日的级联选择效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

//日期联动
function dateLinkage(){
    var MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    //年
    var y=new Date().getFullYear();
    var str='';
    for(var i=(y-20);i<(y+20);i++){
        str+='<option value="'+i+'">'+i+'年</option>';
    }
    $('.year').html(str);

    //月
    var str='';
    for(var i=1;i<13;i++){
        str+='<option value="'+i+'">'+i+'月</option>'
    }
    $('.month').html(str);
    $('.year').val(y);
    $('.month').val(new Date().getMonth() + 1);
    var n=MonHead[new Date().getMonth()];
    var YYYYvalue=document.getElementById("year").options[document.getElementById("year").selectedIndex].value;
    IsPinYear();
    if(new Date().getMonth() ==1 && IsPinYear(YYYYvalue)) n++;
    writeDay(n);
    $('.day').val(new Date().getDate());

    $('.year').change(function(){
        var str=$(this).val();
        var MMvalue=document.getElementById("month").options[document.getElementById("month").selectedIndex].value;
        if(MMvalue==''){
            $('.day').html('<option value="">日</option>');
            return;
        }
        var n=MonHead[MMvalue - 1];
        if(MMvalue ==2 && IsPinYear(str)) n++;
        writeDay(n);
    })

    $('.month').change(function(){
        var str=$(this).val();
        var YYYYvalue=document.getElementById("year").options[document.getElementById("year").selectedIndex].value;
        if(str == ""){
            $('.day').html('<option value="">日</option>');
            return;
        }
        var n = MonHead[str - 1];
        if (str ==2 && IsPinYear(YYYYvalue)) n++;
        writeDay(n);
    })

    function writeDay(n){
        var s='';
        for(var i=1;i<(n+1);i++){
            s+='<option value="'+i+'">'+i+'日</option>';
        }
        $('.day').html(s);
    }

    function IsPinYear(year){
        return(0 == year%4 && (year%100 !=0 || year%400 == 0))
    }

}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值