设置datepicker

Question

http://jsfiddle.net/t3n9p7kp/1/

我有一个日期选择器，设置为选择整周。我有两个按钮，可以在一周内向前和向后移动选定的日期。前进按钮始终有效，但后退按钮仅在月份更改时有效。如果月份没有变化，没有任何反应。代码如下。

$(document).ready(function() {
    $(function() {
        var startDate;
        var endDate;

        var selectCurrentWeek = function() {
            window.setTimeout(function() {
                $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')}, 1);
        }

        $('.week-picker').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').val($.datepicker.formatDate(dateFormat, startDate, inst.settings));
                $('.endDate').val($.datepicker.formatDate(dateFormat, endDate, inst.settings));
                $('.week-picker').val(" " + $.datepicker.formatDate(dateFormat, startDate, inst.settings) + " - " + $.datepicker.formatDate(dateFormat, endDate, inst.settings));

                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();
            }
        });

        $('.week-picker').datepicker("setDate", new Date());
        $('.ui-datepicker-current-day').click();

        $('.week-picker .ui-datepicker-calendar tr').on('mousemove', null, function() { $(this).find('td a').addClass('ui-state-hover'); });
        $('.week-picker .ui-datepicker-calendar tr').on('mouseleave', null, function() { $(this).find('td a').removeClass('ui-state-hover'); });
    });

    $('#preWeek').click(function () {
        var startDate = $('.startDate').val();
        var newDate = new Date(startDate);
        newDate.setDate(newDate.getDate() - 7);
        $('.week-picker').datepicker("setDate", new Date(newDate));
        $('.ui-datepicker-current-day').click();
        return false;
    });

    $('#nextWeek').click(function () {
        var endDate = $('.endDate').val();
        var newDate = new Date(endDate);
        newDate.setDate(newDate.getDate() + 1);
        $('.week-picker').datepicker("setDate", new Date(newDate));
        $('.ui-datepicker-current-day').click();
        return false;
    });
});

我无法弄清楚为什么日期不会向后移动，除非月份发生变化。

Answer 1

在下一步和上一步按钮的处理程序中添加$('.ui-datepicker-current-day:first')而不是$('.ui-datepicker-current-day')将解决您的问题。这是因为您点击了一周中的7天。

$('#preWeek').click(function () {
    var startDate = $('.startDate').val();
    var newDate = new Date(startDate);
    newDate.setDate(newDate.getDate() - 7);
    $('.week-picker').datepicker("setDate", new Date(newDate));
    $('.ui-datepicker-current-day:first').click();
    return false;
});

$('#nextWeek').click(function () {
    var endDate = $('.endDate').val();
    var newDate = new Date(endDate);
    newDate.setDate(newDate.getDate() + 1);
    $('.week-picker').datepicker("setDate", new Date(newDate));
    $('.ui-datepicker-current-day:first').click();
    return false;
});