原生js實現(xiàn)日期聯(lián)動
月份的判定，由于涉及到過多了判定條件，如果用if else會大大降低性能，建議用switch 語法
代碼如下：
getDays:function(year,month){
// var aDay = [31,28|29,31,30,31,30,31,31,30,31,30,31];
// 二月份的天數(shù)數(shù)據(jù)處理
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
------------------------------
日期三級聯(lián)動,范圍選擇
------------------------------
參數(shù)
* [String] targets:'#year,#month,#day' ；年，月，日的id
* [String] range:'2013-02-03,2019-09-21'；范圍，正確格式為xxxx-xx-xx
----為了節(jié)省代碼，請傳入正確的日期范圍參數(shù)
----錯誤示范：
（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('-'), // 轉(zhuǎn)為：['2013','05','20']
aEnds = opt.range.slice(r+1,opt.range.length).split('-'); // 轉(zhuǎn)為：['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});
}
}
}
},
/*設(shè)置年，月，日
----------------------------------
參數(shù)值都為Number類型
*/
// 參數(shù) {'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));
}
},
// 參數(shù) {'start':xx,'end':xxx}
// 參數(shù) '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));
}
},
// 參數(shù) {'start':xx,'year':xxx,'month':xx,'star':xx,'end':xxx}
// 參數(shù) 'end' 為可選，忽略，則開始到本月底（根據(jù)月份判斷的）
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));
}
},
/* 根據(jù) 年，月，返回正確的天數(shù)，如 2016-2，返回是29天（潤年）
--------------------------------------------------------------
參數(shù)值都為Number類型
*/
getDays:function(year,month){
// var aDay = [31,28|29,31,30,31,30,31,31,30,31,30,31];
// 二月份的天數(shù)數(shù)據(jù)處理
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;
},
/*工具輔助函數(shù)
----------------------------------
*/
getId:function(id){
return document.getElementById(id);
}
}
效果展示圖：
效果還不錯吧，小伙伴們自己美化下，使用到自己的項目中去吧。
相關(guān)文章
當網(wǎng)頁加載一個尺寸比較大的圖片時，往往會把一個網(wǎng)頁撐的變形，頁面變得很難看，于是我們就想到了用JS去控制超出一定范圍的圖片2013-08-08
在html和xml文件中，往往會因為以下特殊字符而導(dǎo)致文件解析出錯，一般通過以下函數(shù)來處理。2009-04-04
深入理解JavaScript系列(13) This? Yes,this!
在這篇文章里，我們將討論跟執(zhí)行上下文直接相關(guān)的更多細節(jié)。討論的主題就是this關(guān)鍵字。實踐證明，這個主題很難，在不同執(zhí)行上下文中this的確定經(jīng)常會發(fā)生問題2012-01-01
Hooks讓我們?yōu)橄嗤墓δ芫帉懜俚拇a,我們需要編寫的代碼越少,我們就可以越快地啟動應(yīng)用程序,hooks需要在函數(shù)組件中使用,您不能在 React 類中使用 hooks,函數(shù)式的 React 組件更加現(xiàn)代,并支持有用的 hooks,現(xiàn)在流行把舊式的類組件轉(zhuǎn)換為函數(shù)式組件2024-01-01
這篇文章主要介紹了如何禁止iframe里面的腳本彈出的窗口覆蓋了父窗口,經(jīng)測試，貌似只能在IE下進行需要的朋友可以參考下2014-09-09
這篇文章主要為大家詳細介紹了js html5 css俄羅斯方塊游戲?qū)崿F(xiàn)代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
詳解微信小程序自定義組件的實現(xiàn)及數(shù)據(jù)交互
這篇文章主要介紹了微信小程序自定義組件的實現(xiàn)及數(shù)據(jù)交互，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
控制臺報錯:Cannot?access?'xxx'?before?initializatio
這篇文章主要給大家介紹了關(guān)于控制臺報錯:Cannot?access?'xxx'?before?initialization的解決方法,文中通過代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細介紹了JS制作網(wǎng)站吸頂條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
這篇文章主要為大家詳細介紹了簡單實現(xiàn)js選項卡切換效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02