利用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'