当前位置:首页 > 前端开发 > javascript > 正文内容

javascript实现年月日三级联动

Miao2个月前 (09-27)javascript123

html

<select name="year"></select>
<select name="month"></select>
<select name="day"></select>

javascript,新建js文件保存即可,方便调用。

SYT="-选择年份-";
SMT="-选择月份-";
SDT="-选择日期-";
BYN=50;//年份范围往前n年
AYN=5;//年份范围往后n年
function YMDselect(){
    this.SelY=document.getElementsByName(arguments[0])[0];
    this.SelM=document.getElementsByName(arguments[1])[0];
    this.SelD=document.getElementsByName(arguments[2])[0];
    this.DefY=this.SelD?arguments[3]:arguments[2];
    this.DefM=this.SelD?arguments[4]:arguments[3];
    this.DefD=this.SelD?arguments[5]:arguments[4];
    this.SelY.YMD=this;
    this.SelM.YMD=this;
    this.SelY.onchange=function(){YMDselect.SetM(this.YMD)};
    if(this.SelD)this.SelM.onchange=function(){YMDselect.SetD(this.YMD)};
    YMDselect.SetY(this)
};
//设置年份
YMDselect.SetY=function(YMD){
    dDate = new Date();
    dCurYear = dDate.getFullYear();
    YMD.SelY.options.add(new Option(SYT,'0'));
    for(i = dCurYear+AYN; i>(dCurYear-BYN); i--){
        YMDYT=i+'年';
        YMDYV=i;
        OptY = new Option(YMDYT,YMDYV);
        YMD.SelY.options.add(OptY);
        if(YMD.DefY==YMDYV) OptY.selected=true
    }
    YMDselect.SetM(YMD)
};
//设置月份
YMDselect.SetM=function(YMD){
    YMD.SelM.length = 0;
    YMD.SelM.options.add(new Option(SMT,'0'));
    if(YMD.SelY.value>0){
        for(var i=1;i<=12;i++){
            YMDMT=i+'月';
            YMDMV=i;
            OptM=new Option(YMDMT,YMDMV);
            YMD.SelM.options.add(OptM);
            if(YMD.DefM==YMDMV) OptM.selected=true
        }
    }
    if(YMD.SelD)YMDselect.SetD(YMD)
};
//设置日期
YMDselect.SetD=function(YMD){
    YI=YMD.SelY.value;
    MI=YMD.SelM.value;
    YMD.SelD.length = 0;
    YMD.SelD.options.add(new Option(SDT,'0'));
    if(YI>0 && MI>0){
        dPrevDate = new Date(YI, MI, 0);
        daysInMonth=dPrevDate.getDate();
        for (d = 1; d <= parseInt(daysInMonth); d++) {
            YMDDT=d+'日';
            YMDDV=d;
            OptD=new Option(YMDDT,YMDDV);
            YMD.SelD.options.add(OptD);
            if(YMD.DefD==YMDDV)OptD.selected=true
        }
    }
}

调用方法

<script>
/**
* 年、月二级联动
* new YMDselect('year','month');
* new YMDselect('year','month',2010); //默认2010
* new YMDselect('year','month',2010,2); //默认2010年2月
**/

/**
* 年、月、日三级联动
* new YMDselect('year','month','day');
* new YMDselect('year','month','day',2020); //默认20020年
* new YMDselect('year','month','day',2020,6); //默认20020年6月
* new YMDselect('year','month','day',2020,6,22); //默认20020年6月22日
**/
new YMDselect('year','month','day');
</script>

原文作者:故事我忘了°
原文链接:https://www.cnblogs.com/jsccc520/p/10242262.html

扫描二维码推送至手机访问。

版权声明:本文由Miao发布,版权归作者所有,如需转载请注明出处。

本文地址:https://www.wmlike.com/?id=51

分享给朋友:

相关文章

js动态修改页面标题title

业务场景:跳转页面后,获取后台数据后更改标题! <!DOCTYPE html> <html> <head> <meta cha...

js添加或删除class类名

通常通过js方法给div进行class类名的添加或者删除,比较常见的就是tab切换了,下面就来具体讲一下如何使用js进行操作,最后会附上完整实例代码: <div class="...

js对url进行编码和解码的方式

1、escape 和 unescapeescape 方法 对String对象进行编码,以便他们能够在所有计算机上可读。对除ASCII字母、数字、标点符号 @ * _ + - . /...

js时间戳与日期格式的相互转换

时间戳转日期 stamp = 时间戳,10或13位格式自动识别,10位则*1000nohour = 是否显示时分秒,默认显示 function formatTime(stamp, nohour =...

jquery全部版本下载(持续更新)

注意事项: jquery2.0以上版本不再支持IE6/7/8,请根据项目需求选择版本;jquery官网引用地址经常会出现打不开的情况,尽量不要调用官网地址;个人建议:最好下载保存到自己服务器; 版...

js平均分割数组

js平均分割数组

以下实例是平均每组分为3个平均分割了,剩余的会单独成为一组,想要其它数量分割,将3改为对应数字即可。 var data = ['法国', '澳大利亚', '智...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。