JQuery: Приручаем компонент Datepicker

Недавно возникла необходимость поместить на сайт календарь, с возможностью выбора периода, т.е. нужно указать начало и конец непрерывного периода. Для этой цели я использовал два виджета Datepicker, первый для начальной даты, второй для конечной. Так же нужно было реализовать возможность сделать некоторые даты недоступными для выбора. Решено было сделать виджеты постоянно видимыми, а значения дат подставлять в соответствующие поля формы. Вот собственно сам скрипт настройки виджетов, который у меня получился:

<script type="text/javascript">
    //Первый календарь с начальной датой
    jQuery(function(){
        jQuery( "#from" ).datepicker({
            inline: true, //Отображать в div вместо input
            defaultDate: "+0d",
            changeMonth: false,
            numberOfMonths: 1,
            beforeShowDay: allowedDates, //Функция блокировки дат
            //Поле формы, куда записывать значение календаря
            altField:"#date_from",
            //Переставляем дату во втором календаре
            onSelect: function( selectedDate ) {
                jQuery( "#to" ).datepicker( "option", "minDate", selectedDate );
            }
        });

        //Второй календарь, с конечной датой
        jQuery( "#to" ).datepicker({
            inline: true,
            defaultDate: "+0d",
            changeMonth: false,
            numberOfMonths: 1,
            beforeShowDay: allowedDates,
            altField:"#date_to",
            //Переставляем дату в первом календаре
            onSelect: function( selectedDate ) {
                jQuery( "#from" ).datepicker( "option", "maxDate", selectedDate );
            }
        });

    });

    //Массив с датами, которые нужно сделать недоступными
    var jsForbiddenDatesArray={}
    jsForbiddenDatesArray=[new Date("8/30/2012"),new Date("8/31/2012"),new Date("8/24/2012")];

    //Функция которая делает даты недоступными
    function allowedDates(date) {

        now=new Date();
        now.setHours(0);
        now.setMinutes(0);
        now.setSeconds(0);
        now.setMilliseconds(0);

        //Исключаем даты раньше сегодняшнего дня
        if (date.getTime() < now.getTime()) return [false, ''];

        //Исключаем даты из массива
        for (var i = 0; i < jsForbiddenDatesArray.length; i++) {
            if (date.getTime() == jsForbiddenDatesArray[i].getTime())
                return [false, ''];
        }
        //Если нужно исключить выходные дни раскомментируйте строку ниже
        //return jQuery.datepicker.noWeekends(date);
        return [true,''];
    }
</script>

Оставьте свой комментарий

XHTML: Вы можете использовать следующие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>