Javascript实现通过选择周数显示开始日和结束日的实现代码


Posted in Javascript onMay 30, 2016

 最近在一个项目中遇到一个查询页面,其中一个查询条件是根据选择的年份、月以及周数显示选择的该周从几号到几号,这样一个需求。在网上搜索了一下,有类似的但是没有完全一样的,只好自己动手。思路是首先取得所选择的该年月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实现通过选择周数显示开始日和结束日的实现代码,希望对大家有所帮助!

Javascript 相关文章推荐
JavaScript的事件绑定(方便不支持js的时候)
Oct 01 Javascript
javascript操作数组详解
Dec 17 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
Mar 03 Javascript
jQuery中 attr() 方法使用小结
May 03 Javascript
javascript日期操作详解(脚本之家整理)
Sep 05 Javascript
node.js+express制作网页计算器
Jan 17 Javascript
fullCalendar中文API官方文档
Feb 07 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
10个经典的网页鼠标特效代码
Jan 09 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
vue store之状态管理模式的详细介绍
Jun 13 Javascript
js中switch语句的学习笔记
Mar 25 Javascript
JS组件Bootstrap Table使用实例分享
May 30 #Javascript
Bootstrap table分页问题汇总
May 30 #Javascript
浅析Javascript中bind()方法的使用与实现
May 30 #Javascript
Bootstrap Paginator分页插件使用方法详解
May 30 #Javascript
深入理解JavaScript中的call、apply、bind方法的区别
May 30 #Javascript
全面解析Bootstrap中transition、affix的使用方法
May 30 #Javascript
全面解析Bootstrap中form、navbar的使用方法
May 30 #Javascript
You might like
PHP实现分页的一个示例
2006/10/09 PHP
Php中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
基于php下载文件的详解
2013/06/02 PHP
使用PHP接收POST数据,解析json数据
2013/06/28 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
javascript中tostring()和valueof()的用法及两者的区别
2015/11/16 Javascript
javascript实现起伏的水波背景效果
2016/05/16 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
详解Puppeteer 入门教程
2018/05/09 Javascript
jQuery中$原理实例分析
2018/08/13 jQuery
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
2019/08/02 Javascript
jQuery HTML获取内容和属性操作实例分析
2020/05/20 jQuery
Python的gevent框架的入门教程
2015/04/29 Python
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
python爬取网页内容转换为PDF文件
2020/07/28 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
python 爬取马蜂窝景点翻页文字评论的实现
2020/01/20 Python
Python print不能立即打印的解决方式
2020/02/19 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
借助Paramiko通过Python实现linux远程登陆及sftp的操作
2020/03/16 Python
python调用win32接口进行截图的示例
2020/11/11 Python
厂办主管岗位职责范本
2014/02/28 职场文书
装修公司管理制度
2015/08/05 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书
导游词之日本富士山
2020/01/06 职场文书
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android
Vue3.0 手写放大镜效果
2021/07/25 Vue.js
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技