日期选择器的设置日期

Question

我有一个日期选择器，设置为 select 整整一周。我有两个按钮可以将 selected 日期向前和向后移动一周。前进按钮一直有效，但后退按钮仅在月份更改时有效。如果月份没有改变，则什么也不会发生。代码如下。

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

在 next 和 prev 按钮的处理程序中添加 $('.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;
});

日期选择器的设置日期

Setting date of datepicker

jquery

jquery-ui

jquery-ui-datepicker