There is a jQuery UI calendar.

<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>

When you click on a date, it span#actualDate it into span#actualDate . Tell me how to make it so that the choice of a date not only the first condition is fulfilled, but also the date of the beginning of the week and the date of the end of the week are displayed in another span (for example: from 11.06.2012 to 17.06.2012).

    1 answer 1

    View live sample - http://jsfiddle.net/Deonis/ZJnzc/15/ (updated)

    HTML

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

    JS (updated)

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

    These are the cakes with kittens I have turned out ... I think that the masters of HashCode will offer something better.

    UPD Made what works like in all browsers (checked in FF 12, Opera 11.64, Chrome 19.0.1084.52 m, Safari 5.1.7, Donkey 7 - 9), but somehow it is not human. Or maybe I just raised it with this problem)) Maybe someone can correct that everything was in their head.

    PS If you need to clearly in the format "dd.mm.YYYY", then you can fasten another small function . Without it, for example, on May 5, 2012, the following will be displayed - 5.5.2012 , and with the function key - 05.05.2012

    • @Deonis, thanks for the decision, it works, but only in FF, can you help with cross-browser compatibility? - omgwtf
    • @omgwtf, updated code and link to example in response - Deonis