在標籤中獲取週日期範圍

Question

我有3個按鈕，即周，上一個和下一個。點擊周按鈕，它將顯示在文本框中選擇的日期和添加的6天（範圍爲例如2013年6月26日至2013年7月 ）。點擊上一個按鈕後，它將顯示爲2013年6月19日 - 2016年6月26日在標籤上。點擊下一個按鈕，它將顯示2013年7月2日至2013年7月的標籤。並且過程繼續。我想要如何在JavaScript中完成此操作。

enter code here 



    <input type="text" id="txtDateFilter" readonly="readonly" 
    style="height: 25px; width: 150px; 
    font-size: medium; font-family: Times New Roman;" runat="server" /> 


    <label id="txtdatetimeshow" runat="server" /> 
    <input type="button" id="showweekbtn" runat="server" value="week"/> 
    <input type="button" id="sfprevbtn" runat="server" value="prev"/> 
    <input type="button" id="sfnextbtn" runat="server" value="next"/> 

    Javascript Code   

<script type="text/javascript"> 
$(document).ready(function() 
    { 
    var txtDate=$("#txtDateFilter").val(); 
    var today=new Date(); 
    var day=today.getDay(); 
    var date=today.getDate(); 
    var month=today.getMonth(); 
    var year= today.getFullYear(); 
    var month_names = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", 
"Aug", "Sep", "Oct", "Nov", "Dec"); 

    var NextDate= new Date(year, month, date); 

    var weekdate=new Date(txtDate); 
    weekdate.setDate(weekdate.getDate()+6); 
    var Ndate=NextDate.getDate()+" "+month_names[month]+" 
"+NextDate.getFullYear()+"-"+""+weekdate.getDate()+" 
"+month_names[weekdate.getMonth()]+" "+weekdate.getFullYear(); 

    var nextWeekDate=new Date(weekdate); 
    nextWeekDate.setDate(weekdate.getDate()+6); 
    var NWdate=weekdate.getDate()+" "+month_names[weekdate.getMonth()]+" 
"+weekdate.getFullYear()+"-"+""+nextWeekDate.getDate()+" 
"+month_names[nextWeekDate.getMonth()]+" "+nextWeekDate.getFullYear(); 

    var prevWeekDate=new Date(NextDate); 
    prevWeekDate.setDate(NextDate.getDate()-6); 
    var PWdate=prevWeekDate.getDate()+" "+month_names[prevWeekDate.getMonth()]+" 
"+prevWeekDate.getFullYear()+"-"+NextDate.getDate()+" 
"+month_names[NextDate.getMonth()]+" "+NextDate.getFullYear(); 

    //to show previous date 
    $("#sfprevbtn").click(function() 
     { 
     var prevDate=new Date(year,month,date-1); 
     var pdate=prevDate.getDate()+" "+month_names[month] +" "+prevDate.getFullYear(); 
     $("#txtDateFilter").val(pdate); 


      $("#txtdatetimeshow").text(PWdate); 

    }); 
    //to show next date 
    $("#sfnextbtn").click(function() 
     { 

     var nextDate=new Date(year,month,date+1); 
     var Ndate=nextDate.getDate()+" "+month_names[month] +" 
"+nextDate.getFullYear(); 
     $("#txtDateFilter").val(Ndate); 


      $("#txtdatetimeshow").text(NWdate); 

    }); 

     //to show week view 
     $("#showweekbtn").click(function() 
     { 

      $("#txtdatetimeshow").text(Ndate); 

}); 


</script> 

Answer 1

我創建了一個名爲「getWeekInterval（）」的函數。它使用選擇日期來計算添加了6天到選擇日期的那一天。並以可讀的字符串格式顯示間隔。

function getWeekInterval(){ 
    var start = pickedDate.getTime()+1000*3600*24*7*pointer; 
    var end = start+1000*3600*24*7; 
    $("#date-label").text(new Date(start).toDateString()+"~"+new Date(end).toDateString()); 
} 

然後我註冊一個按鈕點擊事件監聽器。它負責在用戶通過點擊next或prev按鈕更改參考日期並更新日期標籤時記錄所選日期。

$("button").click(function(e){ 
    switch(e.target.id) 
    { 
     case "week-btn": 
      pointer=0; 
      break; 
     case "prev-btn": 
      pointer--; 
      break; 
     case "next-btn": 
      pointer++; 
      break; 
    } 
    getWeekInterval(); 
}); 

我測試了它在jsfiddle。 試試吧，希望這對你有所幫助。