最近一个项目需要统计每周的工作情况,需要一个select列表,可以选择填写某个周的工作情况。option列表是根据前面选择的年份月份动态显示的。将选择的月份按周去掉周六日显示周一到周五的日期。设计如下:
<select id="cyear" onchange="showWorkday()"> <option value="2012">2012</option> <option value="2013">2013</option> <option value="2014">2014</option> <option value="2015">2015</option> <option value="2016">2016</option> <option value="2017">2017</option> <option value="2018">2018</option> <option value="2019">2019</option> <option value="2020">2020</option> <option value="2021">2021</option> <option value="2022">2022</option> </select> <select id="cmonth" onchange="showWorkday()"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select> <select id="cworkday"> </select>
function showWorkday(){ $("#cworkday").html("");//先将显示周日期的列表清空 var year=document.getElementById('cyear').value;//得到选择的年份 var month=document.getElementById('cmonth').value;//得到月份 var date = new Date(); date.setFullYear(year); date.setMonth(month-1);//当前月-1 date.setDate(1); var weeknumber = date.getDay();//该月第一天是星期几 //alert(weeknumber); var monthday=30;//此月的天数,默认30 if(month==1||month==3||month==5||month==7||month==8||month==10||month==12){//每月多少天 monthday=31; } if(month==4||month==6||month==9||month==11){ monthday=30; } if(month==2){ if((year%4==0&&year%100!=0)||(year%400==0)){ monthday=29; } if(!(year%4==0&&year%100!=0)||(year%400==0)){ monthday=28; } } var monthdaybefore=30;//该月上一个月的天数 var monthbefore;//上一个月的月份 var yearbefore=year;//上一个月的年份默认是选择的年份 if(month!=1){//如果选择的不是1月 monthbefore=month-1;//上个月的月份是此月份减1 if(monthbefore==1||monthbefore==3||monthbefore==5||monthbefore==7||monthbefore==8||monthbefore==10||monthbefore==12){//同理得到上个月的月份有多少天 monthdaybefore=31; } if(monthbefore==4||monthbefore==6||monthbefore==9||monthbefore==11){ monthdaybefore=30; } if(monthbefore==2){ if((year%4==0&&year%100!=0)||(year%400==0)){ monthdaybefore=29; } if(!(year%4==0&&year%100!=0)||(year%400==0)){ monthdaybefore=28; } } }else{//如果选择的月是1月 monthbefore=12;//则上一个月是12月 yearbefore=year-1;//上一月的年份是选择的年份减1 if(monthbefore==1||monthbefore==3||monthbefore==5||monthbefore==7||monthbefore==8||monthbefore==10||monthbefore==12){//每月多少天 monthdaybefore=31; } if(monthbefore==4||monthbefore==6||monthbefore==9||monthbefore==11){ monthdaybefore=30; } if(monthbefore==2){ if(((yearbefore-1)%4==0&&(yearbefore-1)%100!= 0)||((yearbefore-1)%400==0)){//闰年用上一个月的年份做判断 monthdaybefore=29; } if(!((yearbefore-1)%4==0&&(yearbefore-1)%100!=0)||((yearbefore-1)%400==0)){ monthdaybefore=28; } } } //alert(monthday) //有了此月及上个月的天数年份,及第一天是周几,就可以分情况得到此月的工作周了 if(weeknumber==1){//第一天是周一那选择列表就是1号到5号,8号到13号。。。。i做为日期起的基数,j做为日期止的基数 for(i=1,j=(i+4);i<=monthday&&j<=monthday;i=i+7,j=i+4){//j每次比i大4,i每次循环加一周加7 $("#cworkday").append("<option value='o' >"+year+"-"+month+"-"+i+"~"+year+"-"+month+"-"+j+"</option>"); }//输出格式可以自己改 } if(weeknumber==2){//第一天是周二则第一周的周一包含了上个月的日期。先输出第一个工作周 $("#cworkday").append("<option value='o' >" +yearbefore+"-"+monthbefore+"-"+monthdaybefore+"~"+year+"-"+month+"-4"+"</option>"); for(i=7,j=(i+4);i<=monthday&&j<=monthday;i=i+7,j=i+4){//相应第二周的周一为7号(手算为7号)再去循环 $("#cworkday").append("<option value='o' >"+year+"-"+month+"-"+i+"~" +year+"-"+month+"-"+j+"</option>"); } } if(weeknumber==3){//第一天是周三 同理 $("#cworkday").append("<option value='o' >"+yearbefore+"-"+monthbefore+"-"+(monthdaybefore-1)+"~"+year+"-"+month+"-3"+"</option>"); for(i=6,j=(i+4);i<=monthday&&j<=monthday;i=i+7,j=i+4){ $("#cworkday").append("<option value='o' >"+year+"-"+month+"-"+i+"~" +year+"-"+month+"-"+j+"</option>"); } } if(weeknumber==4){//第一天是周四 $("#cworkday").append("<option value='o' >"+yearbefore+"-"+monthbefore+"-"+(monthdaybefore-2)+"~"+year+"-"+month+"-2"+"</option>"); for(i=5,j=(i+4);i<=monthday&&j<=monthday;i=i+7,j=i+4){ $("#cworkday").append("<option value='o' >"+year+"-"+month+"-"+i+"~"+year+"-"+month+"-"+j+"</option>"); } } if(weeknumber==5){//第一天是周五 $("#cworkday").append("<option value='o' >"+yearbefore+"-"+monthbefore+"-"+(monthdaybefore-3)+"~"+year+"-"+month+"-1"+"</option>"); for(i=4,j=(i+4);i<=monthday&&j<=monthday;i=i+7,j=i+4){ $("#cworkday").append("<option value='o' >" +year+"-"+month+"-"+i+"~" +year+"-"+month+"-"+j+"</option>"); } } if(weeknumber==6){//第一天是周六 for(i=3,j=(i+4);i<=monthday&&j<=monthday;i=i+7,j=i+4){ $("#cworkday").append("<option value='o' >" +year+"-"+month+"-"+i+"~" +year+"-"+month+"-"+j+"</option>"); } } if(weeknumber==0){//第一天是周日 for(i=2,j=(i+4);i<=monthday&&j<=monthday;i=i+7,j=i+4){ $("#cworkday").append("<option value='o' >" +year+"-"+month+"-"+i+"~" +year+"-"+month+"-"+j+"</option>"); } } }
最终效果如图