Datepicer по неделям

by sazakharov

HTML

<div class="week-picker"></div>
<p>&nbsp;</p>
<label>Week :</label> <span id="startDate"></span> - <span id="endDate"></span>

JavaScript

$(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').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();
        },
        dateFormat: "dd.mm.yy"
    });
	$('.week-picker').on(
		'mousemove',
		'.ui-datepicker-calendar tr',
		function() {
			$(this).find('td a').addClass('ui-state-hover');
		}
	);
	$('.week-picker').on(
		'mouseleave',
		'.ui-datepicker-calendar tr',
		function() {
			$(this).find('td a').removeClass('ui-state-hover');
		}
	);
    setTimeout(function(){
        $('.ui-datepicker-current-day', $('.week-picker')).trigger('click');
    }, 0);
});