Search code examples
jquerydatepickerjquery-ui-datepicker

JQuery Datepicker - pick weekly range starting with Monday


How to change this weekly jquery datepicker range to start the week with Monday?

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

I changed the starting day of datepicker to firstDay: 1 for it to visually start with Monday. But how do I change the weekly range when picking a week to start with Monday as well?


Solution

  • Try this code

    Reset your start and end date

    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