Question

我正在使用asp.net mvc。我试图在网页中显示一个日期选择器，以及两个按钮，即上一个和下一个按钮，用于在datepicker中的几周之间导航。我可以显示datepicker并能够根据用户选择的日期选择总周日期，例如

   $('#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>

假设我目前处于第一周，当我点击下一个按钮时，我需要切换到下周，并且需要选择该周的所有日期。以前的按钮需要以类似的方式工作。我已经尝试过将endDate + 7天设置为datepicker，例如

function gotoNextweek() {
    var $picker = $("#txtSrchFrom");
    var date = new Date($picker.datepicker('getDate'));
    date.setDate(endDate.getDate() + 7);
    return false;
}

但它对我不起作用。请指导我，如何实现这一点。

Answer 1

如果您只想将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 );

Answer 2

从$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

通过外部按钮在jquery datepicker上导航几周

2 个答案: