首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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实现通过选择周数显示开始日和结束日的实现代码

- Author -

山中小溪

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery调取jSon数据并展示的方法
Jan 29 Javascript
JavaScript日期类型的一些用法介绍
Mar 02 Javascript
纯javascript实现四方向文本无缝滚动效果
Jun 16 Javascript
理解JS事件循环
Jan 07 Javascript
js对象浅拷贝和深拷贝详解
Sep 05 Javascript
原生js的RSA和AES加密解密算法
Oct 08 Javascript
jQuery:unbind方法的使用详解
Aug 14 jQuery
详解关于react-redux中的connect用法介绍及原理解析
Sep 11 Javascript
用WebStorm进行Angularjs 2开发(环境篇：Windows 10，Angular-cli方式)
Dec 05 Javascript
微信小程序入门之广告条实现方法示例
Dec 05 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 Javascript
layui的数据表格+springmvc实现搜索功能的例子
Sep 28 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
声卡驱动(1) 虚拟键盘(1) RustDesk(1) Debian(1) 鸿蒙(2) 鸿蒙3.0(1) 蓝屏(1) 输入法(2) win7(2) 滚动条(1)
You might like
真正的ZIP文件操作类(php)
2007/07/21 PHP
利用static实现表格的颜色隔行显示的代码
2007/09/02 PHP
PHP中使用TCPDF生成PDF文档实例
2014/07/01 PHP
CMS中PHP判断系统是否已经安装的方法示例
2014/07/26 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
PHP引用返回用法示例
2016/05/28 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
js验证表单大全
2006/11/25 Javascript
调试Node.JS的辅助工具(NodeWatcher)
2012/01/04 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
js中数组的常用方法小结
2016/12/30 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
微信小程序中setInterval的使用方法
2017/09/29 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
2017/11/07 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
2018/09/17 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
2019/05/22 Javascript
Nodejs 数组的队列以及forEach的应用详解
2021/02/25 NodeJs
Python内置函数bin() oct()等实现进制转换
2012/12/30 Python
Python cookbook(数据结构与算法)筛选及提取序列中元素的方法
2018/03/19 Python
Python实现按中文排序的方法示例
2018/04/25 Python
教你利用Python玩转histogram直方图的五种方法
2018/07/30 Python
Python人工智能之路 jieba gensim 最好别分家之最简单的相似度实现
2019/08/13 Python
Python 实现 T00ls 自动签到脚本代码（邮件+钉钉通知）
2020/07/06 Python
详解pytorch中squeeze()和unsqueeze()函数介绍
2020/09/03 Python
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
使用HTML5 Canvas API控制字体的显示与渲染的方法
2016/03/24 HTML / CSS
Notino瑞典：购买香水和美容产品
2019/07/26 全球购物
可口可乐唇膏：Lip Smackers
2019/08/27 全球购物
POS解决方案：MUNBYN（热敏打印机、条形码扫描仪）
2020/06/09 全球购物
2014年法院工作总结
2014/11/24 职场文书
离职感谢信怎么写
2015/01/22 职场文书
Python+Tkinter制作专属图形化界面
2022/04/01 Python