最近在一個項目中遇到一個查詢頁面，其中一個查詢條件是根據選擇的年份、月以及週數顯示選擇的該週從幾號到幾號，這樣一個需求。在網上搜索了一下，有類似的但是沒有完全一樣的，只好自己動手。思路是首先取得所選擇的該年月1號這一天是星期幾，然後算出這一周中周一的日期。
以此為基點，第1週的結束日即為這一天加6，第2週的開始日為這一天加7，結束日為這一天加13，以此類推，直到推算出第5週的開始日和結束日。
具體代碼如下：
//該方法有兩個參數，date是給定的日期型參數，days是需要在該日期進行加減的天數。 //例如，add(2010-10-01,-3)返回從2010-10-01這一天往前退3天的日期即2010-09-28 function addDate(date,days){ var d=new Date(date); d.setDate(d.getDate()+days); var m=d.getMonth()+1; var tmpDate = d.getFullYear()+ "/" + m + "/" + d.getDate(); var resultDate = new Date(tmpDate); return resultDate; } //對選擇的年月轉換為YYYY-MM-dd的格式function changeDateFormat(DateIn){ var year = 0; var month = 0; var Day = 0; var currentDate = ""; year = DateIn.getYear(); month = DateIn.getMonth() + 1; Day = DateIn.getDate(); currentDate = year + "-"; if(month > 10){ currentDate = currentDate + month + "-"; }else{ currentDate = currentDate + "0" + month + "-"; } if(Day > 10){ currentDate = currentDate + Day; }else{ currentDate = currentDate + "0" + Day; } return currentDate; } //根據選擇的周計算出本週的開始日和結束日function weekToDate(weekNumber,strWeekDay,dateIn){ //輸出的開始日var outputDate_1 = ""; //輸出的結束日var outputDate_2 = ""; var tmp_date= ""; //如果選擇的年月1號這一天恰好為sunday，該週monday的日期為這一天的日期-6 if(strWeekDay == '0'){ outputDate_1 = addDate(dateIn,-6); } //如果選擇的年月1號這一天為monday,第二個參數設為0，以下以此類推。 if(strWeekDay == '1'){ outputDate_1 = addDate(dateIn,0); } if(strWeekDay == '2'){ outputDate_1 = addDate(dateIn,-1); } if(strWeekDay == '3'){ outputDate_1 = addDate(dateIn,-2); } if(strWeekDay == '4'){ outputDate_1 = addDate(dateIn,-3); } if(strWeekDay == '5'){ outputDate_1 = addDate(dateIn,-4); } if(strWeekDay == '6'){ outputDate_1 = addDate(dateIn,-5); } if(weekNumber == '1'){ outputDate_2 = dateIn; } if(weekNumber == '2'){ outputDate_2 = addDate(outputDate_1,+7); } if(weekNumber == '3'){ outputDate_2 = addDate(outputDate_1,+14); } if(weekNumber == '4'){ outputDate_2 = addDate(outputDate_1,+21); } if(weekNumber == '5'){ outputDate_2 = addDate(outputDate_1,+28); } if(weekNumber == '1'){ //第1週的開始日結束日計算基點都是outputDate_1,因此單獨判斷document.getElementById("spnDate").value = changeDateFormat(outputDate_1); temp_date = addDate(outputDate_1,+6); document.getElementById("finishTime").value =changeDateFormat(temp_date); }else{ //第2週以後的開始日結束日都以outputDate_2為計算基點document.getElementById("spnDate").value = changeDateFormat(outputDate_2); temp_date = addDate(outputDate_2,+6); document.getElementById("finishTime").value =changeDateFormat(temp_date); } } function getFromToDateOfSelectedWeek(){ var year = document.getElementById("sltYear"); var optionYear=year.getElementsByTagName("option"); var strYear = "" ; for(var i=0;i<optionYear.length;++i) { if(optionYear[i].selected){ strYear = optionYear[i].text; } } var month = document.getElementById("sltMonth"); var option = month.getElementsByTagName("option"); var strMonth = "" ; for(var i=0;i<option.length;++i) { if(option[i].selected){ strMonth = option[i].text; } } //根據選擇的年月，組合成yyyy/mm/01的日期字符串var sltDate_tmp_0 = strYear+ "/" + strMonth + "/" + "1"; //將日期字符串轉換為日期型var sltDate_tmp_1 = new Date(sltDate_tmp_0); //取得該月1號所在的星期數var weekDay = sltDate_tmp_1.getDay(); //獲取頁面選擇的周數var weekNumber = document.getElementById("weekNumber"); var optionWeek=weekNumber.getElementsByTagName("option"); var strWeek = "" ; var tmp_date= ""; var outputDate_1 = ""; var outputDate_2 = ""; for(var i=0;i<optionWeek.length;++i) { if(optionWeek[i].selected){ strWeek = optionWeek[i].text; } } //選擇第1週時計算該年月1號這一天為monday到sunday各種可能性，返回該週monday到sunday的日期//以下判斷以此類推if(strWeek == '1'){ if(weekDay == '0'){ weekToDate(strWeek,'0',sltDate_tmp_1); } if(weekDay == '1'){ weekToDate(strWeek,'1',sltDate_tmp_1); } if(weekDay == '2'){ weekToDate(strWeek,'2',sltDate_tmp_1); } if(weekDay == '3'){ weekToDate(strWeek,'3',sltDate_tmp_1); } if(weekDay == '4'){ weekToDate(strWeek,'4',sltDate_tmp_1); } if(weekDay == '5'){ weekToDate(strWeek,'5',sltDate_tmp_1); } if(weekDay == '6'){ weekToDate(strWeek,'6',sltDate_tmp_1); } } if(strWeek == '2'){ if(weekDay == '0'){ weekToDate(strWeek,'0',sltDate_tmp_1); } if(weekDay == '1'){ weekToDate(strWeek,'1',sltDate_tmp_1); } if(weekDay == '2'){ weekToDate(strWeek,'2',sltDate_tmp_1); } if(weekDay == '3'){ weekToDate(strWeek,'3',sltDate_tmp_1); } if(weekDay == '4'){ weekToDate(strWeek,'4',sltDate_tmp_1); } if(weekDay == '5'){ weekToDate(strWeek,'5',sltDate_tmp_1); } if(weekDay == '6'){ weekToDate(strWeek,'6',sltDate_tmp_1); } } if(strWeek == '3'){ if(weekDay == '0'){ weekToDate(strWeek,'0',sltDate_tmp_1); } if(weekDay == '1'){ weekToDate(strWeek,'1',sltDate_tmp_1); } if(weekDay == '2'){ weekToDate(strWeek,'2',sltDate_tmp_1); } if(weekDay == '3'){ weekToDate(strWeek,'3',sltDate_tmp_1); } if(weekDay == '4'){ weekToDate(strWeek,'4',sltDate_tmp_1); } if(weekDay == '5'){ weekToDate(strWeek,'5',sltDate_tmp_1); } if(weekDay == '6'){ weekToDate(strWeek,'6',sltDate_tmp_1); } } if(strWeek == '4'){ if(weekDay == '0'){ weekToDate(strWeek,'0',sltDate_tmp_1); } if(weekDay == '1'){ weekToDate(strWeek,'1',sltDate_tmp_1); } if(weekDay == '2'){ weekToDate(strWeek,'2',sltDate_tmp_1); } if(weekDay == '3'){ weekToDate(strWeek,'3',sltDate_tmp_1); } if(weekDay == '4'){ weekToDate(strWeek,'4',sltDate_tmp_1); } if(weekDay == '5'){ weekToDate(strWeek,'5',sltDate_tmp_1); } if(weekDay == '6'){ weekToDate(strWeek,'6',sltDate_tmp_1); } } if(strWeek == '5'){ if(weekDay == '0'){ weekToDate(strWeek,'0',sltDate_tmp_1); } if(weekDay == '1'){ weekToDate(strWeek,'1',sltDate_tmp_1); } if(weekDay == '2'){ weekToDate(strWeek,'2',sltDate_tmp_1); } if(weekDay == '3'){ weekToDate(strWeek,'3',sltDate_tmp_1); } if(weekDay == '4'){ weekToDate(strWeek,'4',sltDate_tmp_1); } if(weekDay == '5'){ weekToDate(strWeek,'5',sltDate_tmp_1); } if(weekDay == '6'){ weekToDate(strWeek,'6',sltDate_tmp_1); } } }經過測試有一個bug，當2月1日是星期一併且選擇的年份是平年時，選擇2月的第5週，此時第5週的開始日已經是3月而不是2月了。例如，選擇2010年2月第5週此時，程序會顯示2010-03-1至2010-03-07。
解決方法有兩種，一是當用戶選擇第5週時把月份下拉框強制設定到3月。二是，將周下拉框強制設定到第4週上，並且顯示2010-02-22至2010年02-28。
經過測試有一個bug，當2月1日是星期一併且選擇的年份是平年時，選擇2月的第5週，此時第5週的開始日已經是3月而不是2月了。
例如，選擇2010年2月第5週此時，程序會顯示2010-03-1至2010-03-07。
解決方法有兩種，一是當用戶選擇第5週時把月份下拉框強制設定到3月。二是，將周下拉框強制設定到第4週上，並且顯示2010-02-22至2010年02-28。
經過測試有一個bug，當2月1日是星期一併且選擇的年份是平年時，選擇2月的第5週，此時第5週的開始日已經是3月而不是2月了。
例如，選擇2010年2月第5週此時，程序會顯示2010-03-1至2010-03-07。
解決方法有兩種，一是當用戶選擇第5週時把月份下拉框強制設定到3月。二是，將周下拉框強制設定到第4週上，並且顯示2010-02-22至2010年02-28。
以上所述是小編給大家介紹的基於Javascript實現通過選擇週數顯示開始日和結束日的實現代碼，希望對大家有所幫助！