Home > Article > Web Front-end > Native js implements date linkage_javascript skills
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:
Full source code:
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.