最近一个项目需要统计每周的工作情况,需要一个select列表,可以选择填写某个周的工作情况。option列表是根据前面选择的年份月份动态显示的。将选择的月份按周去掉周六日显示周一到周五的日期。设计如下:
<select id="cyear" οnchange="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" οnchange="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>");
}
}
}
最终效果如图