1

Есть календарь jQuery UI.

<script type="text/javascript">
    $(function(){

        $('#datepicker').datepicker({
            inline: true,
            firstDay: 1,
            showOtherMonths:true,
            dateFormat: "dd.mm.yy",
            dayNamesMin: ['ВС', 'ПН', 'ВТ', 'СР', 'ЧТ', 'ПТ', 'СБ'],
            monthNames: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
            maxDate: new Date(2012, 7, 31),
            minDate: new Date(2012, 5, 1),
            hideIfNoPrevNext: true,
            onSelect: function(dateText, inst) {
                $("#actualDate").html(dateText);
            }
        });

    });
</script>

При клике на дату, он вписывает ее в span#actualDate. Подскажите, как сделать так, что бы выборе даты выполнялось не только первое условие но и дата "начала недели" и дата "конца недели" выводились в другой span ( к примеру: c 11.06.2012 по 17.06.2012 ).

1 ответ 1

2

Посмотреть пример в живую - http://jsfiddle.net/Deonis/ZJnzc/15/ (обновлена)

HTML

<input type="text" id="datepicker"/>
<div id="res"></div>

JS (обновлен)

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

Вот такие пирожки с котятами у меня получились... Думаю, что мэтры ХэшКода предложат чего получше.


UPD Сделал, что работает вроде во всех браузерах (проверил в FF 12, Opera 11.64, Chrome 19.0.1084.52 m, Safari 5.1.7, Осел 7 - 9), но как-то оно всё не по человечески. Или же я просто замахался с этой задачко )) Может кто поправит, что всё по уму было.

P.S. Если надо четко в формате "dd.mm.YYYY", тогда можно прикрутить еще одну маленьку функцию. Без неё, к примеру 5 мая 2012 года, отобразиться так - 5.5.2012, а с функцикй - 05.05.2012

2
  • @Deonis, спасибо за решение, работает, правда только в FF, можешь помочь с кросбраузерностью?
    – omgwtf
    26 мая 2012 в 9:55
  • @omgwtf, обновил в ответе код и ссылку на пример
    – Deonis
    26 мая 2012 в 14:44

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.