Поддержка колесика мыши jQuery UI Datepicker

Question

Есть ли где-нибудь аддон, который добавляет поддержку колесика мыши в указатель даты jQuery UI? (Так что использование колесика мыши над календарем заставляет месяц двигаться вперед / назад.)

changelog , похоже, указывает на то, что поддержка колесика мыши была добавлена ​​в 1.7, но выглядит так, что набор изменений на самом деле не имеет ничего общего с указателем даты. При быстром поиске 1,8 указывается, что встроенная поддержка колесика мыши отсутствует.

Я знаю DatePicker Кейта Вуда поддерживает колесико мыши, но я использую этот таймер , который зависит от DatePicker пользовательского интерфейса jQuery.

Answer 1

Небольшое обновление: Начиная с jQuery 1.7, метод .live () устарел. Используйте .on (), чтобы прикрепить обработчики событий. Также мне пришлось использовать event.originalEvent.wheelDelta, чтобы получить дельту.

$(document).on('mousewheel', '.ui-datepicker', function (event) {
    var sel = event.originalEvent.wheelDelta < 0 ? '.ui-datepicker-next' : '.ui-datepicker-prev';
    $(this).find(sel).click();
    event.preventDefault();
    event.stopPropagation();
});

Answer 2

Его можно легко добавить, добавив следующий код в функцию готовности.Он использует расширение jQuery mousewheel и добавляет прослушиватель событий livewheel для событий mousewheel в элементах datepicker пользовательского интерфейса jQuery.Если он обнаружен, он вызывает событие click на кнопке «предыдущий / следующий месяц».

Демонстрация в реальном времени: http://jsfiddle.net/PSFgY/

$('.ui-datepicker').live("mousewheel", function(event, delta){
    if(delta < 0){
        $(this).find('.ui-datepicker-next').click();
    } else {
        $(this).find('.ui-datepicker-prev').click();
    }
    event.preventDefault();
    event.stopPropagation();
});

Answer 3

Вот еще один способ решения проблемы, особенно когда установлены минимальная и максимальная даты:

$('.ui-datepicker').bind("mousewheel", function(e){
    var delta = e.originalEvent.wheelDelta;
    if(delta <  0){
        $(this).find('.ui-datepicker-next').click();
    } else {
        $(this).find('.ui-datepicker-prev').click();
    }
    e.preventDefault();
});