2. 程式人生 > >用Javascript實現通過選擇週數顯示開始日和結束日

用Javascript實現通過選擇週數顯示開始日和結束日

阿新 • • 發佈：2019-01-28

最近在一個專案中遇到一個查詢頁面，其中一個查詢條件是根據選擇的年份、月以及週數顯示選擇的該周從幾號到幾號，這樣一個需求。在網上搜索了一下，有類似的但是沒有完全一樣的，只好自己動手。思路是首先取得所選擇的該年月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實現通過選擇週數顯示開始日和結束日

最近在一個專案中遇到一個查詢頁面，其中一個查詢條件是根據選擇的年份、月以及週數顯示選擇的該周從幾號到幾號，這樣一個需求。在網上搜索了一下，有類似的但是沒有完全一樣的，只好自己動手。思路是首先取得所選擇的該年月1號這一天是星期幾，然後算出這一週中週一的日期。以此為基點，第1周

輸入周獲取週數的開始時間和結束時間減6天再算就好

草率的寫了一下通過輸入的週數,獲取選擇週數的開始時間可結束時間周的結束時間(週數*7=天數)               周的開始時間 (週數*7=天數)  程式碼 /** * 輸

用javascript實現簡單的用戶登錄驗證

-c turn get https 沒有 驗證 utf-8 .com head 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="

用java實現的strstr函數的一些問題

符號 clas bsp 問題： pub spa 操作 記錄 位置 用java實現過程如下： 1 public static int strstr(char[] cArray1,char[] cArray2){ 2 if(cArray1!=null &&

用Java實現的選擇排序和冒泡排序

auth main sta -i str public java index 選擇 選擇排序 package cn.hxd.sort; /** * 選擇排序 * @author Administrator * */ public class SelectionSo

用javascript實現base64編碼器

應用 ges 標準 asd 富文本 隨著 不同 none fail 前面的話 　　base-64作為常見的編碼函數，在基本認證、摘要認證以及一些HTTP擴展中得到了大量應用。在前端領域，也常常把圖片轉換為base-64編碼在網絡中傳輸。本文將詳細介紹base64的原理及用j

怎麽用JavaScript實現tab切換

代碼 www. 股神 .class 最終 ccf article cti ext 先看一下代碼實現後的最終效果： 用JavaScript實現思路很簡單，就是先把所有的內容隱藏，點擊標題對應的內容顯示， css代碼如下： <style type="text/css"

用JavaScript添加選擇按鈕的背景顏色和juqery添加選擇按鈕的背景色

fun function repeat eat lib chan func 1.5 ++ 在項目開發中經常遇到要選擇的按鈕，選擇完之後被選擇的按鈕的背景色會發生變化，表示被選擇 樣式圖如下： 每點擊一個數字，相應的背景色變為藍色，其他的依舊是白色，先用JavaScript

用javascript實現拖拽帶來的種種問題(1)

round head 出發 mark mov 點擊事件 pan func 屬性 第一篇，先水一下，用javascript實現簡單的拖拽。主要還是想通過demo的形式總結一下各種event對象屬性。 首先先看一下，這個demo最終實現的效果： 主要涉及的屬性有： Mouse

Python之Suds庫調用WCF實現復雜參數序列化

rtu keyvalue microsoft ets tex sse exceptio https aps 今年主要做自動化測技術支持工作，最近一直在做接口自動化這塊,前些天在研究將web頁面模擬http進行接口自動化，這周杭州那邊想測試WCF服務,所以這兩天一直在探索。遇

用javascript實現的購物車實例

close meta parseint ces post count ret selected html 基於javascript實現的購物車實例： 首先是效果和功能，如下圖所示，具有購物車的基本功能。 包括1、選中和全選商品；2、商品數量的增減；3、單個商品價格的計算；4

用JavaScript實現CheckBox的全選取消反選，及遮罩層中添加內容

document 當前 CI itl HA posit size classlist ML 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta cha

用JavaScript，打印水仙花數；

java head doctype char body int utf console i++ <!DOCTYPE html> <html> <head> <meta charset="utf-8" />

用Javascript實現棧結構

github主頁：https://github.com/A15162252289 什麼是棧？ 棧是一種遵從後進先出(LIFO)原則的有序集合。新新增的或待刪除的元素都儲存在棧的同一端，稱之為棧頂，另一端則為棧底。在棧裡，新元素靠近棧頂，舊元素靠近棧底。 如何實現棧？ 1.首

javascript實現圖片上傳實時顯示上傳圖片

我們平時會用到圖片上傳要求上傳的圖片要實時顯示，那麼下面就是我的方法 HTML程式碼如下 <input type="file" name="file" onchange="showImg(this)" /> <img id=

用Javascript實現連結串列

github主頁：https://github.com/A15162252289 什麼是連結串列 連結串列儲存有序的元素集合，但不同於陣列，連結串列中的元素在記憶體中不是連續放置的。每個元素由一個儲存元素本身的節點和指向下一個元素的引用組成。 下圖為單向連結串列的示意圖 相對於傳統

python學習——用dictionary實現通過地區查詢郵編

    剛剛學習了python的基本語法，對自己學習的內容進行實踐下。 dictionary字典（類似map） 總結：1.dictionary比list讀取速度快，但是佔用記憶體大，適合存放不需修改，經常查詢的鍵值對資料。 　 　   2.每個元素是唯一，不可

用Javascript實現國際象棋棋盤的佈局

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i

用 JavaScript 實現簡單拼圖遊戲

本篇主要講解，如何利用原生的 JavaScript 來實現一個簡單的拼圖小遊戲。 線上體驗地址：拼圖 一、遊戲的基礎邏輯 想用一門語言來開發遊戲，必須先了解如何使用這門語言來實現一些基礎邏輯，比如影象的繪製、互動的處理、定時器等。 1、圖形繪製 圖形繪製是一切的基礎，這裡使用 Ja

快速用JavaScript實現劃詞取詞，可複製百度文庫文字（獲取滑鼠選中區域文字）

完整程式碼可在最後程式碼塊檢視呦！！！ ※本貼程式碼，可用用於油猴指令碼，支援瀏覽器F12Console控制檯直接執行 有一段時間呢在百度文庫查詢資料時被限制了複製，說什麼複製次數已達上限，那個 難受鴨！！於是我打開了傳說中的F12，意外的發現了一個功能 就是很意外的發現我所選中的文字會在