我正在使用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像,
但它不適用於我。請指導我,如何做到這一點。