JQuery Datepicker - 选择从星期一开始的每周范围

标签 jquery datepicker jquery-ui-datepicker

如何更改此每周 jquery 日期选择器范围以从星期一开始一周?

http://jsfiddle.net/oykmv300/

$(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,
    firstDay: 1,
    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 ));

        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 .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});

我将日期选择器的开始日期更改为firstDay: 1,以便在视觉上从星期一开始。但是,当选择从星期一开始的一周时,如何更改每周范围?

最佳答案

尝试此代码

重置您的开始结束日期

startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);

DEMO

关于JQuery Datepicker - 选择从星期一开始的每周范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44497525/

相关文章:

jquery - 像 :contains, :selected etc. 这样的额外选择器的名称是什么?

javascript - 使用jquery从YouTube提要xml抓取视频ID

Symfony2 中的 jQuery 日期选择器给出 'This value is not valid.'

jquery - 如何向 jquery-ui datepicker 实例添加额外的事件处理程序?

javascript - jquery:在一行中创建多个元素

javascript - jquery模态超时后自动显示

kendo-ui - 如何将 Angular Kendo 日期选择器的最小日期设置为昨天?

android - 日期计算器

javascript - jQuery Datepicker 将结束日期限制为一周而不超过前一天

jquery - 查找直接父级 jQuery