原生js实现日期联动

月份的判定，由于涉及到过多了判定条件，如果用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?29:28,
            returnDays = '';
        var month = month<10?month = '0'+month:month.toString();
        switch(month){
            case '01':
            case '03':
            case '05':
            case '07':
            case '08':
            case '10':
            case '12': returnDays = 31;break;
            case '04':
            case '06':
            case '09':
            case '11': returnDays = 30;break;
            case '02': returnDays = FedDays;break;
        }
        return returnDays;
    }



完整的源代码：


代码如下:


/*  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?29:28,             returnDays = '';         var month = month<10?month = '0'+month:month.toString();         switch(month){             case '01':             case '03':             case '05':             case '07':             case '08':             case '10':             case '12': returnDays = 31;break;             case '04':             case '06':             case '09':             case '11': returnDays = 30;break;             case '02': returnDays = FedDays;break;         }         return returnDays;     },     /*工具辅助函数     ----------------------------------     */     getId:function(id){         return document.getElementById(id);     } }


效果展示图：

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


有用  |  无用 取消

猜你喜欢