Search code examples
javascriptjquerypreventdefault

Disable scrolling when hovering over DateTime input field

One of my input fields (a simple editorfor, type=datetime) right now allows the user to use the mouse wheel to change the date when hovering over it. This behavior has to stop, because it can cause accidental changes when scrolling down the page. I have tried several suggestions like preventDefault and blur, but non of them work... 

$(function () {
    $(':input[type="datetime"]').bind('mousewheel', function (event) {
        event.preventDefault();
    });
});

I even tested to add the hover event to the whole, but in all cases there remains a whole lot of scrollability. In the end I would like to disable value changing with the mouse wheel completely for this datetime input.

Thanks!

Solution

  • Try this:

    $('input[type=datetime-local]').bind("mousewheel", function () {
 return false;
});

    Also you should consider using datetime-local since datetime was depricated.