Javascript實(shí)現(xiàn)通過(guò)選擇周數(shù)顯示開(kāi)始日和結(jié)束日的實(shí)現(xiàn)代碼
更新時(shí)間：2016年05月30日 09:40:52 作者：山中小溪
這篇文章主要介紹了Javascript實(shí)現(xiàn)通過(guò)選擇周數(shù)顯示開(kāi)始日和結(jié)束日的實(shí)例代碼的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下
最近在一個(gè)項(xiàng)目中遇到一個(gè)查詢(xún)頁(yè)面，其中一個(gè)查詢(xún)條件是根據(jù)選擇的年份、月以及周數(shù)顯示選擇的該周從幾號(hào)到幾號(hào)，這樣一個(gè)需求。在網(wǎng)上搜索了一下，有類(lèi)似的但是沒(méi)有完全一樣的，只好自己動(dòng)手。思路是首先取得所選擇的該年月1號(hào)這一天是星期幾，然后算出這一周中周一的日期。
以此為基點(diǎn)，第1周的結(jié)束日即為這一天加6，第2周的開(kāi)始日為這一天加7，結(jié)束日為這一天加13，以此類(lèi)推，直到推算出第5周的開(kāi)始日和結(jié)束日。
具體代碼如下：
//該方法有兩個(gè)參數(shù)，date是給定的日期型參數(shù)，days是需要在該日期進(jìn)行加減的天數(shù)。
//例如，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;
}
//對(duì)選擇的年月轉(zhuǎn)換為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;
}
//根據(jù)選擇的周計(jì)算出本周的開(kāi)始日和結(jié)束日
function weekToDate(weekNumber,strWeekDay,dateIn){
//輸出的開(kāi)始日 var outputDate_1 = "";
//輸出的結(jié)束日 var outputDate_2 = "";
var tmp_date= "";
//如果選擇的年月1號(hào)這一天恰好為sunday，該周monday的日期為這一天的日期-6
if(strWeekDay == '0'){
outputDate_1 = addDate(dateIn,-6);
}
//如果選擇的年月1號(hào)這一天為monday,第二個(gè)參數(shù)設(shè)為0，以下以此類(lèi)推。
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周的開(kāi)始日結(jié)束日計(jì)算基點(diǎn)都是outputDate_1,因此單獨(dú)判斷
document.getElementById("spnDate").value = changeDateFormat(outputDate_1);
temp_date = addDate(outputDate_1,+6);
document.getElementById("finishTime").value =changeDateFormat(temp_date);
}else{
//第2周以后的開(kāi)始日結(jié)束日都以outputDate_2為計(jì)算基點(diǎn)
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;
}
}
//根據(jù)選擇的年月，組合成yyyy/mm/01的日期字符串
var sltDate_tmp_0 = strYear+ "/" + strMonth + "/" + "1";
//將日期字符串轉(zhuǎn)換為日期型
var sltDate_tmp_1 = new Date(sltDate_tmp_0);
//取得該月1號(hào)所在的星期數(shù)
var weekDay = sltDate_tmp_1.getDay();
//獲取頁(yè)面選擇的周數(shù)
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周時(shí)計(jì)算該年月1號(hào)這一天為monday到sunday各種可能性，返回該周monday到sunday的日期
//以下判斷以此類(lèi)推
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);
}
}
}
經(jīng)過(guò)測(cè)試有一個(gè)bug，當(dāng)2月1日是星期一并且選擇的年份是平年時(shí)，選擇2月的第5周，此時(shí)第5周的開(kāi)始日已經(jīng)是3月而不是2月了。例如，選擇2010年2月第5周此時(shí)，程序會(huì)顯示2010-03-1至2010-03-07。
解決方法有兩種，一是當(dāng)用戶(hù)選擇第5周時(shí)把月份下拉框強(qiáng)制設(shè)定到3月。二是，將周下拉框強(qiáng)制設(shè)定到第4周上，并且顯示2010-02-22至2010年02-28。
經(jīng)過(guò)測(cè)試有一個(gè)bug，當(dāng)2月1日是星期一并且選擇的年份是平年時(shí)，選擇2月的第5周，此時(shí)第5周的開(kāi)始日已經(jīng)是3月而不是2月了。
例如，選擇2010年2月第5周此時(shí)，程序會(huì)顯示2010-03-1至2010-03-07。
解決方法有兩種，一是當(dāng)用戶(hù)選擇第5周時(shí)把月份下拉框強(qiáng)制設(shè)定到3月。二是，將周下拉框強(qiáng)制設(shè)定到第4周上，并且顯示2010-02-22至2010年02-28。
經(jīng)過(guò)測(cè)試有一個(gè)bug，當(dāng)2月1日是星期一并且選擇的年份是平年時(shí)，選擇2月的第5周，此時(shí)第5周的開(kāi)始日已經(jīng)是3月而不是2月了。
例如，選擇2010年2月第5周此時(shí)，程序會(huì)顯示2010-03-1至2010-03-07。
解決方法有兩種，一是當(dāng)用戶(hù)選擇第5周時(shí)把月份下拉框強(qiáng)制設(shè)定到3月。二是，將周下拉框強(qiáng)制設(shè)定到第4周上，并且顯示2010-02-22至2010年02-28。
以上所述是小編給大家介紹的基于Javascript實(shí)現(xiàn)通過(guò)選擇周數(shù)顯示開(kāi)始日和結(jié)束日的實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助！
相關(guān)文章
微信小程序點(diǎn)擊item使之滾動(dòng)到屏幕中間位置
這篇文章主要介紹了微信小程序點(diǎn)擊item使之滾動(dòng)到屏幕中間位置,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-03
如何用js實(shí)現(xiàn)判斷是否是小數(shù)
這篇文章主要給大家介紹了關(guān)于如何用js實(shí)現(xiàn)判斷是否是小數(shù)的相關(guān)資料,文中介紹了如何通過(guò)使用isNaN()函數(shù)和使用正則表達(dá)式來(lái)解決,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2024-04-04
微信小程序 騰訊地圖SDK 獲取當(dāng)前地址實(shí)現(xiàn)解析
這篇文章主要介紹了微信小程序 騰訊地圖SDK 獲取當(dāng)前地址實(shí)現(xiàn)解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
JS高仿拋物線(xiàn)加入購(gòu)物車(chē)特效實(shí)現(xiàn)代碼
本篇文章主要介紹了JS高仿拋物線(xiàn)加入購(gòu)物車(chē)特效實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-02-02
模仿選擇文件夾效果的javascript封裝類(lèi)，效果不錯(cuò)，實(shí)際應(yīng)用呢，暫時(shí)用不到，大家可以學(xué)習(xí)思路2008-09-09
Javascript 中的 && 和 || 使用小結(jié)
Javascript 中的 && 和 || ，有時(shí)候用作條件判斷，非常的簡(jiǎn)潔，不熟悉的朋友可能不太了解，這里最后有個(gè)朋友補(bǔ)充，非常的好。2010-04-04
這篇文章主要介紹了為什么JavaScript沒(méi)有塊級(jí)作用域的相關(guān)資料,需要的朋友可以參考下2016-05-05
JavaScript檢測(cè)用戶(hù)是否在線(xiàn)的6種方法總結(jié)
這篇文章主要為大家詳細(xì)介紹了JavaScript中實(shí)現(xiàn)檢測(cè)用戶(hù)是否在線(xiàn)的6種常用方法,文中的示例代碼講解詳細(xì),感興趣的可以跟隨小編一起學(xué)習(xí)一下2023-08-08
JavaScript格式化數(shù)字的函數(shù)代碼
當(dāng)要格式化的數(shù)字為null、空或非數(shù)字時(shí)，返回的結(jié)果。默認(rèn)為02010-11-11
這篇文章主要介紹了webpack-dev-server核心概念案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09