Календарь с диапозоном дат недели

by Denis

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.20/themes/base/jquery-ui.css">
<p>Кликаем в поле, не стесняемся:</p>
<input type="text" id="datepicker"/>
<div id="res"></div>

CSS

#datepicker {
    padding: 2px;
    border: 1px solid #999;
}
#res {
    font-size: 1.2em;
}
#res strong {
    color: #060;
}

JavaScript

function getCurWeek(curDate){
    // Получаем из даты номер выбранного дня недели
    var cDay = parseInt(curDate[0], 10);
    var cMonth = parseInt(curDate[1], 10) - 1;
    var cYear = parseInt(curDate[2], 10);
    var dateObj = new Date(cYear, cMonth, cDay);
    var dayNum = dateObj.getDay();
    
    // объект даты первого дня недели
    var dStart = new Date(dateObj.setDate(cDay  - (dayNum - 1)));
    
    var dateObj = new Date(cYear, cMonth, cDay);
    // объект даты последнего дня недели
    var dEnd = new Date(dateObj.setDate(cDay + ( 7 - dayNum)));
    
    
    // формируем дату начала недели
    var startDay = dStart.getDate() + '.' + (dStart.getMonth() + 1) + '.' + dStart.getFullYear();
    // формируем дату конца недели
    var endDay = dEnd.getDate() + '.' + (dEnd.getMonth() + 1) + '.' + dEnd.getFullYear();
    // выводим на общее обозрение
    $('#res').append('<p>Эта неделя: с <strong>' + startDay + '</strong> по <strong>' + endDay + '</strong></p>');
    return false;
}
// обычная инициализация календарика
$( "#datepicker" ).datepicker({
    dateFormat: "dd.mm.yy",
    firstDay: 1,
    onSelect: function(dateText, inst) {
        var curDate = dateText.split('.');
        $('#res').html('Выбрана дата: <strong>' + dateText + '</strong>');
        // вызываем функцию для получения дат начала и конца недели
        getCurWeek(curDate);  
    }
});