Question

是否有一个插件可以为jQuery UI datepicker添加鼠标轮支持？（因此，在日历上使用鼠标滚轮会导致月份前进/后退。）

changelog似乎表明在1.7中添加了鼠标滚轮支持，但它looks like that changeset实际上与datepicker无关。粗略搜索1.8表示没有内置的鼠标滚轮支持。

我知道Keith Wood's datepicker支持鼠标滚轮，但我使用this timepicker，这取决于jQuery UI的datepicker。

Answer 1

可以通过将以下代码添加到就绪功能来轻松添加。它使用jQuery mousewheel extension并在jQuery UI datepicker div上为mousewheel事件添加实时事件监听器。如果检测到一个，它会触发上一个/下个月按钮上的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 2

小更新： 从jQuery 1.7开始，不推荐使用.live（）方法。使用.on（）附加事件处理程序。我还必须使用event.originalEvent.wheelDelta来获取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();
});

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

jQuery UI Datepicker鼠标滚轮支持

3 个答案: