月份的判定,由于涉及到过多了判定条件,如果用if else会大大降低性能,建议用switch 语法

代码如下:

复制代码 代码如下:
 getDays:function(year,month){
         // var aDay = [31,28|29,31,30,31,30,31,31,30,31,30,31];
        // 二月份的天数数据处理
        var FedDays = year%4==0"codetitle">复制代码 代码如下:
/*  author:laoguoyong
------------------------------
日期三级联动,范围选择
------------------------------
参数
* [String] targets:'#year,#month,#day' ;年,月,日的id
* [String] range:'2013-02-03,2019-09-21';范围,正确格式为xxxx-xx-xx
----为了节省代码,请传入正确的日期范围参数
----错误示范:
  (1)range:'2013-02-03,2019-9-21' 是不对的,注意日期格式
  (2)range:'2013-02-03' 是不对的,请输入完整的范围之值
  (3)range:'2013-02-03,2016-02-30' 是不对的,2月没有30天
  (3)range:'2013-02-03,2011-02-30' 是不对的,范围错误了
*
*/
function GySetDate(opt){
    //elem
    var targets = opt.targets.split(',');
    this.eYear = this.getId(targets[0].slice(1));
    this.eMonth = this.getId(targets[1].slice(1));
    this.eDay = this.getId(targets[2].slice(1));
    if(!this.eYear||!this.eMonth||!this.eDay) return;
    //范围值
    var r = opt.range.indexOf(','),
        aStarts = opt.range.slice(0,r).split('-'), // 转为:['2013','05','20']
        aEnds = opt.range.slice(r+1,opt.range.length).split('-'); // 转为:['2018','08','20']
    //Number类型
    this.startYear = parseInt(aStarts[0],10);
    this.startMonth = parseInt(aStarts[1],10);
    this.startDay = parseInt(aStarts[2],10);
    this.endYear = parseInt(aEnds[0],10);
    this.endMonth = parseInt(aEnds[1],10);
    this.endDay = parseInt(aEnds[2],10);

    this.init();
}
GySetDate.prototype = {
    init:function(){
        var _that = this;
        // 初始化日期
        this.setYears({'start':this.startYear,'end':this.endYear});
        this.setMonths({'start':this.startMonth});
        this.setDays({'year':this.startYear,'month':this.startMonth,'start':this.startDay});
        // 年选择
        this.eYear.onchange = function(){
            var year = parseInt(this.value);
            switch(true){
                case (year == _that.startYear):{
                    _that.setMonths({'start':_that.startMonth});
                    _that.setDays({'year':_that.startYear,'month':_that.startMonth,'start':_that.startDay});
                };break;
                case (year == _that.endYear):{
                    _that.setMonths({'start':1,'end':_that.endMonth});
                    if(_that.endMonth>1){
                        _that.setDays({'year':_that.endYear,'month':1,'start':1});   
                    }else{
                        _that.setDays({'year':_that.endYear,'month':1,'start':1,'end':_that.endDay});
                    }
                };break;
                default:{
                    _that.setMonths({'start':1});
                    _that.setDays({'start':1,'year':year,'month':1});
                }
            }
           
        }
        // 月选择
        this.eMonth.onchange = function(){
            var year = parseInt(_that.eYear.options[_that.eYear.selectedIndex].value),
                month = parseInt(this.value);
            switch(true){
                case (year==_that.endYear&&month==_that.endMonth):{
                    _that.setDays({'start':1,'year':year,'month':month,'end':_that.endDay});
                };break;
                case (year==_that.startYear&&month==_that.startMonth):{
                    _that.setDays({'year':_that.startYear,'month':_that.startMonth,'start':_that.startDay});
                };break;
                default:{
                    _that.setDays({'start':1,'year':year,'month':month});
                }
            }   
           
        }
    },
    /*设置年,月,日
    ----------------------------------
    参数值都为Number类型
    */
    // 参数 {'start':xx,'end':xxx}
    setYears:function(opt){
        this.eYear.innerHTML = '';
         for(var n=opt.start;n<=opt.end;n++){
            this.eYear.add(new Option(n,n));
        }
    },
    // 参数 {'start':xx,'end':xxx}
    // 参数 'end' 为可选,忽略,则开始到12月
    setMonths:function(opt){
        this.eMonth.innerHTML = '';
        var months = opt.end || 12;
        for(var n=opt.start;n<=months;n++){
            if(n<10) n = '0'+n;
           this.eMonth.add(new Option(n,n));
        }
    },
    // 参数 {'start':xx,'year':xxx,'month':xx,'star':xx,'end':xxx}
    // 参数 'end' 为可选,忽略,则开始到本月底(根据月份判断的)
    setDays:function(opt){
         this.eDay.innerHTML = '';
         var days = opt.end || this.getDays(opt.year,opt.month);
         for(var n=opt.start;n<=days;n++){
            if(n<10) n = '0'+n;
            this.eDay.add(new Option(n,n));
         }
    },
    /* 根据 年,月,返回正确的天数,如 2016-2,返回是29天(润年)
    --------------------------------------------------------------
    参数值都为Number类型
    */
    getDays:function(year,month){
         // var aDay = [31,28|29,31,30,31,30,31,31,30,31,30,31];
        // 二月份的天数数据处理
        var FedDays = year%4==0"" src="/UploadFiles/2021-04-02/201501120907481.jpg">

效果还不错吧,小伙伴们自己美化下,使用到自己的项目中去吧。

标签:
js,日期联动

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“原生js实现日期联动”

暂无“原生js实现日期联动”评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。