js動態操作select,按周得到workday工作日的日期段即每月的週一到週五
阿新 • • 發佈:2019-02-01
最近一個專案需要統計每週的工作情況,需要一個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>"); } } }
最終效果如圖
Java學習交流群: 2177712