1. 程式人生 > >js動態操作select,按周得到workday工作日的日期段即每月的週一到週五

js動態操作select,按周得到workday工作日的日期段即每月的週一到週五

最近一個專案需要統計每週的工作情況,需要一個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