0

我有 3 个按钮，即一周，上一个和下一个。单击星期按钮时，它将显示在文本框中选择的日期和添加到它的 6 天（在例如 26 Jun 2013-2 Jul 2013 的范围内）。单击上一个按钮时，标签中将显示为 2013 年 6 月 19 日-2013 年 6 月 26 日。单击下一个按钮时，标签中将显示 2013 年 7 月 2 日-2013 年 7 月 8 日。这个过程还在继续。我想要如何在 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>
4

1 回答 1

0

我创建了一个名为“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());
}

然后我注册了一个按钮点击事件监听器。当用户通过单击下一个或上一个按钮更改参考日期并更新日期标签时，它负责记录选择的日期。

$("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中对其进行了测试。试试看，希望这对你有帮助。

于 2013-06-26T07:08:23.353 回答