通過外部按鈕瀏覽jQuery日期選擇器之間的星期幾

我正在使用asp.net mvc。我試圖在網頁中顯示日期選擇器，以及兩個按鈕，即上一個和下一個用於在datepicker中的幾周之間進行導航的按鈕。我能顯示日期選擇器，並能夠基於用戶選擇的日期總星期日期，就像通過外部按鈕瀏覽jQuery日期選擇器之間的星期幾

$('#txtSrchFrom').datepicker({ 
     showOtherMonths: true, 
     selectOtherMonths: true, 
     onSelect: function (dateText, inst) { 
      var date = $(this).datepicker('getDate'); 
      startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay()); 
      endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6); 
      var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat; 
      $('#startDate').text($.datepicker.formatDate(dateFormat, startDate, inst.settings)); 
      $('#endDate').text($.datepicker.formatDate(dateFormat, endDate, inst.settings)); 
      if (startDate.getMonth() == endDate.getMonth()) { 
       $('#txtSrchFrom').val(getMonthName(startDate.getMonth()) + " " + startDate.getDate() + " - " + endDate.getDate() + ", " + startDate.getFullYear()); 
      } 
      else { 
       $('#txtSrchFrom').val(getMonthName(startDate.getMonth()) + " " + startDate.getDate() + " - " + getMonthName(endDate.getMonth()) + " " + endDate.getDate() + ", " + startDate.getFullYear()); 
      } 
      selectCurrentWeek(); 
     }, 
     beforeShowDay: function (date) { 
      var cssClass = ''; 
      if (date >= startDate && date <= endDate) 
       cssClass = 'ui-datepicker-current-day'; 
      return [true, cssClass]; 
     }, 
     onChangeMonthYear: function (year, month, inst) { 
      selectCurrentWeek(); 
     } 
    }); 

    $('#txtSrchFrom .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); }); 
    $('#txtSrchFrom .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });

，這裏是我的標記，

<input type="button" class="btn btn-info" value="<< Prev" /> 
<div class="input-group" style="width: 220px;"> 
    <input type="text" class="form-control" id="txtSrchFrom" name="txtSrchFrom" readonly="readonly" placeholder="Search by From Date" /> 
    <span class="input-group-addon"><i class="icon-calendar"></i></span> 
</div> 
<input type="button" class="btn btn-info" value="Next >>" onclick="return gotoNextweek();"/> 
<br /> 
<label>Week :</label> <span id="startDate"></span> - <span id="endDate"></span>

假設我目前在第1周，當我點擊下一個按鈕，我需要切換到下週，並需要選擇該周的所有日期。和以前的按鈕需要以類似的方式工作。我試圖通過設置endDate + 7天到datepicker像，

但它不適用於我。請指導我，如何做到這一點。

來源

2014-01-06 Karthik Bammidi

如果你只是想〜7天添加到當前選定的日期用途：

var new_date = $("#datepicker").datepicker("getDate"); 
new_date = new_date.setDate(new_date.getDate()+7); 
new_date = new Date(new_date);  
$("#datepicker").datepicker("setDate", new_date);

來源

2014-01-06 15:22:02 cretzzzu3000

日期從$picker.datepicker('getDate')回來已經是一個約會對象，你不能把它傳遞給new Date()一次

$('#next, #prev').on('click', function(e) { 
    var date = $('#datepicker').datepicker('getDate'); 
    e.target.id == 'next' ? date.setDate(date.getDate()+7) : date.setDate(date.getDate()-7); 
    $('#datepicker').datepicker('setDate', date); 
});

FIDDLE

來源

2014-01-06 15:24:29 adeneo

通過外部按鈕瀏覽jQuery日期選擇器之間的星期幾

回答

相關問題