原生js實作日期連動_javascript技巧

月份的判定，由於涉及過多了判定條件，如果用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         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 = {
    初始化：函數（）{
        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(){
            varieear = parseInt(this.value);
            開關（真）{
                案例（年份==_that.startYear）：{
                    _that.setMonths({'start':_that.startMonth});
                    _that.setDays({'year':_that.startYear,'month':_that.startMonth,'start':_that.startDay});
                };休息;
                案例（年份==_that.endYear）：{
                    _that.setMonths({'start':1,'end':_that.endMonth});
                    if(_that.endMonth>1){
                        _that.setDays({'year':_that.endYear,'month':1,'start':1});   
                    }其他{
                        _that.setDays({'year':_that.endYear,'month':1,'start':1,'end':_that.endDay});
                    }
                };休息;
                預設值：{
                    _that.setMonths({'start':1});
                    _that.setDays({'start':1,'year':year,'month':1});
                }
            }
           
        }
        // 月選擇
        this.eMonth.onchange = function(){
            variear = parseInt(_that.eYear.options[_that.eYear.selectedIndex].value),
                月 = parseInt(this.value);
            開關（真）{
                案例（年=_that.endYear&&月=_that.endMonth）：{
                    _that.setDays({'start':1,'year':year,'month':month,'end':_that.endDay});
                };休息;
                案例（年=_that.startYear&&月=_that.startMonth）：{
                    _that.setDays({'year':_that.startYear,'month':_that.startMonth,'start':_that.startDay});
                };休息;
                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             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             if(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             if(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         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);
    }
}

效果展示圖：

效果還不錯吧，小夥伴們自己美化下，使用到自己的專案中去吧。