CODEWITHSUNDEEP
jquery-uimousewheeljquery-ui-datepicker
josh3736
josh3736

Reputation: 144912

jQuery UI Datepicker mousewheel support

Is there a addon somewhere that adds mousewheel support to the jQuery UI datepicker? (So that using the mousewheel over the calendar causes the month to advance/go back.)

The changelog seems to indicate that mousewheel support was added in 1.7, but it looks like that changeset actually had nothing to do with the datepicker. A cursory search of 1.8 indicates there's no built-in mousewheel support.

I know Keith Wood's datepicker supports the mousewheel, but I'm using this timepicker, which depends on jQuery UI's datepicker.

Upvotes: 2

Views: 3154

Answers (3)

Torbjörn Nomell
Torbjörn Nomell

Reputation: 3010

A small update: As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Also I had to use event.originalEvent.wheelDelta to get the delta.

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

Upvotes: 2

Beta Projects
Beta Projects

Reputation: 446

Here is another way to handle the problem especially when minimum and maximum dates are set:

$('.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();
});

Upvotes: 0

DarthJDG
DarthJDG

Reputation: 16591

It can be easily added by adding the following code to your ready function. It uses the jQuery mousewheel extension and adds a live event listener for mousewheel events on jQuery UI datepicker divs. If one is detected, it triggers the click event on the prev/next month button.

Live demo: 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();
});

Upvotes: 2

Related Questions