時間とか日付とかホイールで入力できると割とストレスフリー。なので、jqueryとmousewheel.jsを使って実装してみる。

HTML側

<input type="text" id="hoge" name="hoge" value="0" />

javascript側

時間を入力。

$('input[name=hoge]').mousewheel(function(event, delta, deltaX, deltaY){
    $targetElm = $(this)
    var currentVal = parseInt(targetElm.val());//現在値
    var nextVal = 0;
    nextVal = currentVal + deltaY;
    if(nextVal < 0) nextVal = 23;
    nextVal = nextVal % 24;
    elm.val(nextVal);
    
    //ホイールイベントをここで止める（スクロールを止める）
    if (event.preventDefault) {
        event.preventDefault();
    }
    event.returnValue = false;//これないと効かないブラウザもあった気がする
});

日付を入力。日付の加減算はmoment.jsを使用。エラーチェックなし。

$('input[name=hoge]').mousewheel(function(event, delta, deltaX, deltaY){
    $targetElm = $(this)
    var m = moment($targetElm.val(), "YYYY-MM-DD");
    if(deltaY > 0)
        m.add(1,"days")
    else
        m.subtract(1,"days")
    $targetElm.val(m.format("YYYY-MM-DD"));
    
    //ホイールイベントをここで止める（スクロールを止める）
    if (event.preventDefault) {
        event.preventDefault();
    }
    event.returnValue = false;//これないと効かないブラウザもあった気がする
});