Recently I encountered a query page in a project, where a query condition is to display the selected number of days to days of the week based on the selected year, month and week number. I searched online and found that there were similar ones but not exactly the same ones, so I had to do it myself. The idea is to first obtain the day of the week on the 1st of the year and month of the year, and then calculate the date of Monday of the week.
Taking this as the basis point, the end day of the first week is added to this day, the beginning day of the second week is added to this day, the end day is added to this day, the end day is added to this day, and so on, until the start day and end day of the fifth week are calculated.
The specific code is as follows:
//This method has two parameters. date is the given date parameter, and days is the number of days that need to be added or subtracted on that date. //For example, add(2010-10-01,-3) returns the date of 3 days going forward from 2010-10-01, that is, 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; } //Convert the selected year and month to 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; } // Calculate the start and end date of the week according to the selected week function weekToDate(weekNumber,strWeekDay,dateIn){ //The start date of the output var outputDate_1 = ""; //The end date of the output var outputDate_2 = ""; var tmp_date= ""; //If the day selected on the 1st of the year happens to be sunday, the date of the week's monday is the date of the day-6 if(strWeekDay == '0'){ outputDate_1 = addDate(dateIn,-6); } //If the day of the 1st of the year and month selected is Monday, the second parameter is set to 0, and so on. 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,-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'){ //The calculation base points of the first week's start day and end day are outputDate_1, so the document.getElementById("spnDate").value = changeDateFormat(outputDate_1); temp_date = addDate(outputDate_1,+6); document.getElementById("finishTime").value =changeDateFormat(temp_date); }else{ //The start and end days after week 2 are calculated using outputDate_2 as the base point 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; } } //According to the selected year and month, the date string combined into yyyy/mm/01 var sltDate_tmp_0 = strYear+ "/" + strMonth + "/" + "1"; //Convert the date string to date type var sltDate_tmp_1 = new Date(sltDate_tmp_0); //Get the number of weeks on the 1st of the month var weekDay = sltDate_tmp_1.getDay(); //Get the number of weeks selected by the page 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; } } // When selecting week 1, calculate the day of the year and month 1 as various possibilities, return the date of the week to sunday, and return the date of the week to sunday//The following judgment and so on 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 == '2'){ weekToDate(strWeek,'2',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 == '1'){ weekToDate(strWeek,'1',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,'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,'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); } } }After testing, there is a bug. When February 1 is Monday and the year selected is the average year, the fifth week of February is selected. At this time, the start date of week 5 is already March instead of February. For example, select the 5th week of February 2010 at this time, the program will display 2010-03-1 to 2010-03-07.
There are two solutions. One is to force the month drop-down box to March when the user selects Week 5. Second, force the weekly drop-down box to week 4, and display 2010-02-22 to 2010-02-28.
After testing, there is a bug. When February 1 is Monday and the year selected is the average year, the fifth week of February is selected. At this time, the start date of week 5 is already March instead of February.
For example, select the 5th week of February 2010 at this time, the program will display 2010-03-1 to 2010-03-07.
There are two solutions. One is to force the month drop-down box to March when the user selects Week 5. Second, force the weekly drop-down box to week 4, and display 2010-02-22 to 2010-02-28.
After testing, there is a bug. When February 1 is Monday and the year selected is the average year, the fifth week of February is selected. At this time, the start date of week 5 is already March instead of February.
For example, select the 5th week of February 2010 at this time, the program will display 2010-03-1 to 2010-03-07.
There are two solutions. One is to force the month drop-down box to March when the user selects Week 5. Second, force the weekly drop-down box to week 4, and display 2010-02-22 to 2010-02-28.
The above is the implementation code based on Javascript based implementation based on Javascript by selecting the number of weeks to display the start and end days. I hope it will be helpful to everyone!