jQuery UI Datepicker - Как я могу при выборе выделить определенный диапазон дат?

Я хочу, чтобы, когда пользователь выбирает дату, выделял следующие 11 дней. Намерение состоит в том, чтобы показать 12-дневный диапазон, выбранный в зависимости от того, какой день был выбран.

Я видел, что предлагается "выбор диапазона дат" из http://www.filamentgroup.com/, но на самом деле это не дает мне той визуализации, которую я хочу, это просто позволяет пользователю выбирать диапазон (от / до), как я это понимаю.

Любое предложение о том, как я могу это реализовать?

Ваше здоровье


jquery-ui jquery-ui-datepicker
person hard_life    schedule 09.11.2009    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Вы можете использовать событие beforeShowDay, чтобы задать стиль CSS для дат, которые нужно выделить. .

Код:

$(document).ready(function(){
    var selected = null;

    $('#datePicker').datepicker({beforeShowDay: function(date) {
                        if (selected != null && date.getTime() > selected.getTime() &&
                            (date.getTime() - selected.getTime()) < 12*24*3600*1000) {
                            return [true, "highlighted"];
                        }
                        return [true, ""];
                    }});

    $("#datePicker").datepicker( 'option' , 'onSelect', function() {
            str = $(this).val().toString();
            selected=$.datepicker.parseDate('mm/dd/yy', str);
            console.log(selected);
            });
});
person kgiannakakis    schedule 09.11.2009
comment
Я изучил это, но, насколько я понимаю (с моим несколько ограниченным опытом jquery / js), я смогу сделать это при загрузке, но не каждый раз, когда он щелкает? Я имею в виду игнорирование функции загрузки, когда она запускается для каждой даты, каждый раз, когда дата выбирается, я получаю выбранную дату в своей функции, как я могу затем проверить следующие 11 дней? Я могу упустить что-то очевидное здесь - person hard_life; 09.11.2009