Home  >  Article  >  Web Front-end  >  Native js implements date linkage_javascript skills

Native js implements date linkage_javascript skills

WBOY
WBOYOriginal
2016-05-16 16:20:521026browse

Month determination involves too many determination conditions. Using if else will greatly reduce performance. It is recommended to use switch syntax

The code is as follows:

Copy code The code is as follows:

getDays:function(year,month){
// var aDay = [31,28|29,31,30,31,30,31,31,30,31,30,31];
// Day data processing in February
      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;
}

Full source code:

Copy code The code is as follows:

/* author:laoguoyong
----------------------------------
Date three-level linkage, range selection
----------------------------------
Parameters
* [String] targets:'#year,#month,#day'; id of year, month and day
* [String] range:'2013-02-03,2019-09-21'; range, the correct format is xxxx-xx-xx
----To save code, please pass in the correct date range parameter
----Error demonstration:
(1) range:'2013-02-03,2019-9-21' is incorrect, pay attention to the date format
(2) range:'2013-02-03' is incorrect, please enter the complete range value
(3) range:'2013-02-03,2016-02-30' is wrong, February does not have 30 days
(3) range:'2013-02-03,2011-02-30' is incorrect, the range is wrong
*
*/
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;
//Range value
var r = opt.range.indexOf(','),
aStarts = opt.range.slice(0,r).split('-'), // Convert to: ['2013','05','20']
aEnds = opt.range.slice(r 1,opt.range.length).split('-'); // Convert to: ['2018','08','20']
//Number type
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});
                }
                                                                                                                                             }
},
/*Set year, month, day
​​---------------------------------
The parameter values ​​are all of type Number
*/
// Parameters {'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));
}
},
// Parameters {'start':xx,'end':xxx}
//The parameter 'end' is optional, if ignored, it will start to December
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));
}
},
// Parameters {'start':xx,'year':xxx,'month':xx,'star':xx,'end':xxx}
//The parameter 'end' is optional, if ignored, it will start to the end of this month (judged based on the month)
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));
         }
},
/* Based on the year and month, return the correct number of days, such as 2016-2, the return is 29 days (run year)
-------------------------------------------------- ------------
The parameter values ​​are all of type Number
*/
GetDays:function(year,month){
// var aDay = [31,28|29,31,30,31,30,31,31,30,31,30,31];
// Day data processing in February
      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;
},
/*Tool auxiliary function
​​---------------------------------
*/
GetId:function(id){
           return document.getElementById(id);
}
}

Effect display:

The effect is not bad, friends, you can beautify it and use it in your own projects.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn