Javascript实现通过选择周数显示开始日和结束日的实现代码
最近在一个项目中遇到一个查询页面，其中一个查询条件是根据选择的年份、月以及周数显示选择的该周从几号到几号，这样一个需求。在网上搜索了一下，有类似的但是没有完全一样的，只好自己动手。思路是首先取得所选择的该年月1号这一天是星期几，然后算出这一周中周一的日期。
以此为基点，第1周的结束日即为这一天加6，第2周的开始日为这一天加7，结束日为这一天加13，以此类推，直到推算出第5周的开始日和结束日。
具体代码如下：
//该方法有两个参数，date是给定的日期型参数，days是需要在该日期进行加减的天数。
//例如，add(2010-10-01,-3)返回从2010-10-01这一天往前退3天的日期即2010-09-28
functionaddDate(date,days){
vard=newDate(date);
d.setDate(d.getDate()+days);
varm=d.getMonth()+1;
vartmpDate=d.getFullYear()+"/"+m+"/"+d.getDate();
varresultDate=newDate(tmpDate);
returnresultDate;
}
//对选择的年月转换为YYYY-MM-dd的格式
functionchangeDateFormat(DateIn){
varyear=0;
varmonth=0;
varDay=0;
varcurrentDate="";
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;
}
returncurrentDate;
}
//根据选择的周计算出本周的开始日和结束日
functionweekToDate(weekNumber,strWeekDay,dateIn){
//输出的开始日varoutputDate_1="";
//输出的结束日varoutputDate_2="";
vartmp_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);
}
}
functiongetFromToDateOfSelectedWeek(){
varyear=document.getElementById("sltYear");
varoptionYear=year.getElementsByTagName("option");
varstrYear="";
for(vari=0;i<optionYear.length;++i)
{
if(optionYear[i].selected){
strYear=optionYear[i].text;
}
}
varmonth=document.getElementById("sltMonth");
varoption=month.getElementsByTagName("option");
varstrMonth="";
for(vari=0;i<option.length;++i)
{
if(option[i].selected){
strMonth=option[i].text;
}
}
//根据选择的年月，组合成yyyy/mm/01的日期字符串
varsltDate_tmp_0=strYear+"/"+strMonth+"/"+"1";
//将日期字符串转换为日期型
varsltDate_tmp_1=newDate(sltDate_tmp_0);
//取得该月1号所在的星期数
varweekDay=sltDate_tmp_1.getDay();
//获取页面选择的周数
varweekNumber=document.getElementById("weekNumber");
varoptionWeek=weekNumber.getElementsByTagName("option");
varstrWeek="";
vartmp_date="";
varoutputDate_1="";
varoutputDate_2="";
for(vari=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实现通过选择周数显示开始日和结束日的实现代码，希望对大家有所帮助！