利用select實現年月日三級聯動的日期選擇效果

目錄

前面的話

　　關於select控制項，可能年月日三級聯動的日期選擇效果是最常見的應用了。本文是選擇框腳本的實踐，下麵將對日期選擇效果進行詳細介紹

演示

規劃

　　預設情況下，年、月、日分別由3個select控制項組成，id分別為sel1，sel2，sel3。它們且所包含的option[0]的值，分別為'年'、'月'、'日'

　　年份範圍為1900-2100，月份範圍為1-12，天的範圍為1-31

　　年份範圍、月份範圍是不變的。而天的範圍根據實際日期的計算來改變其範圍值

　　id為result的span元素儲存最終選擇的日期值及對應的星期值

<div id="box">
    <select name="sel1" id="sel1">
        <option value="year">年</option>
    </select>
    <select name="sel2" id="sel2">
    <option value="month">月</option>
    </select>
    <select name="sel3" id="sel3">
    <option value="day">日</option>
    </select>
    <span id="result"></span>
</div>

結構生成

　　由於數據太過龐大，所以使用javascript生成的方式生成結構

//生成1900年-2100年
for(var i = 1900; i<=2100;i++){
    var option = document.createElement('option');
    option.setAttribute('value',i);
    option.innerHTML = i;
    sel1.appendChild(option);
}
//生成1月-12月
for(var i = 1; i <=12; i++){
    var option = document.createElement('option');
    option.setAttribute('value',i);
    option.innerHTML = i;
    sel2.appendChild(option);    
}
//生成1日—31日
for(var i = 1; i <=31; i++){
    var option = document.createElement('option');
    option.setAttribute('value',i);
    option.innerHTML = i;
    sel3.appendChild(option);    
}

演算法處理

　　演算法的實質就是確定某年某月到底有多少天，然後對多餘的天數進行刪除或者對少的天數進行添加

【1】閏年

　　年分為閏年和平年，平年有365天，閏年有366天。閏年的2月比平年多一天

　　閏年的定義是(可被4整除)且((不可被100整除)或(可被400整除))的年份

　　口訣是：四年一閏，百年不閏，四百年再閏

if((year % 4 === 0 && year % 100 !== 0)  || year % 400 === 0){
    return 'leap year'
}else{
    return 'common year'
}

【2】大小月

　　一年有12個月，其中4、6、9、11月每月有30天；如果是閏年，2月有29天，否則 ，2月有28天。1、3、5、7、8、10、12月每月有31天

if(month == 2){
    //如果是閏年
    if((year % 4 === 0 && year % 100 !== 0)  || year % 400 === 0){
        days = 29;
    //如果是平年
    }else{
        days = 28;
    }
//如果是第4、6、9、11月
}else if(month == 4 || month == 6 ||month == 9 ||month == 11){
    days = 30;
}else{
    days = 31;
}

【3】增減情況

　　考慮特殊情況，如果先選擇31日，再選擇2月，則發生錯誤。所以，選擇年份時，月份和天數自動置為預設值'月'和'日'，天數的範圍重置為'31'

//年份點擊
sel1.onclick = function(){
    //月份顯示預設值
    sel2.options[0].selected = true;
    //天數顯示預設值
    sel3.options[0].selected = true;
}

　　選擇月份時，天數自動置為預設值'日'，天數的範圍根據計算顯示相應天數

　　此時，天數可能為28、29、30、31四種情況

    //增加或刪除天數
    //如果是28天，則刪除29、30、31天(即使他們不存在也不報錯)
    if(days == 28){
        sel3.remove(31);
        sel3.remove(30);
        sel3.remove(29);
    }
    //如果是29天
    if(days == 29){
        sel3.remove(31);
        sel3.remove(30);
        //如果第29天不存在，則添加第29天
        if(!sel3.options[29]){
            sel3.add(new Option('29','29'),undefined)
        }
    }
    //如果是30天
    if(days == 30){
        sel3.remove(31);
        //如果第29天不存在，則添加第29天
        if(!sel3.options[29]){
            sel3.add(new Option('29','29'),undefined)
        }
        //如果第30天不存在，則添加第30天
        if(!sel3.options[30]){
            sel3.add(new Option('30','30'),undefined)
        }
    }
    //如果是31天
    if(days == 31){
        //如果第29天不存在，則添加第29天
        if(!sel3.options[29]){
            sel3.add(new Option('29','29'),undefined)
        }
        //如果第30天不存在，則添加第30天
        if(!sel3.options[30]){
            sel3.add(new Option('30','30'),undefined)
        }
        //如果第31天不存在，則添加第31天
        if(!sel3.options[31]){
            sel3.add(new Option('31','31'),undefined)
        }
    }

【4】結果顯示

　　每次年、月、日的點擊事件，都判斷年份、月份和天數是否都已經設置為非預設值。如果是的，則顯示最終結果，並計算星期值；如果不是，則什麼都不執行

//星期格式切換
function changDay(num){
    switch(num){
        case 0:
            return '日';
        case 1:
            return '一';
        case 2:
            return '二';
        case 3:
            return '三';
        case 4:
            return '四';
        case 5:
            return '五';
        case 6:
            return '六';            
    }
}

//結果顯示
box.onclick = function(){
    //當年、月、日都已經為設置值時
    if(sel1.value !='year' && sel2.value != 'month' && sel3.value !='day'){
        var day = new Date(sel1.value,sel2.value-1,sel3.value).getDay();
        result.innerHTML = sel1.value + '年' + sel2.value + '月' +  sel3.value + '日' + '星期' + changDay(day);
    }else{
        result.innerHTML = '';
    }
}

源碼查看