jQueryプラグインtimedropperを使うと、ちょっとユーモラスで、値を変更しやすい時刻入力が実装できます。ページをロードすると、時刻入力のフィールドにそのときの時刻がam/pm付きで表示されます。フィールドをクリックまたはタップすると、時計イラスト風のUIが表示されます。時刻を変更する場合は、時間または分の部分を選び、時計イラストのティアードロップ形の部分をドラッグすることでそれぞれ変更できます。

使い方：　jQueryと「timedropper.js」、「timedropper.css」を設置し、次のhtmlソースのようにするだけです。

htmlソース

<div class="sample">
    <form name="sample">
        時刻：<input type="text" id="timedrop" />
    </form>
    <script>
        $( "#timedrop" ).timeDropper();
    </script>
</div>

サンプル

サンプル2は、パラメータ部分を追加して、色などをカスタマイズしています。また、マウスホイールによる値の変更が可能になっています

サンプル2のhtmlソース

<div class="sample">
    <form name="sample2">
        時刻：<input type="text" id="timedrop2" />
    </form>
    <script>
        $( "#timedrop2" ).timeDropper({
            meridians: true,
            mousewheel: true,
            primaryColor: "#3c3",  
            textColor: "#292",       
            backgroundColor: "#efe",
            borderColor: "#161"
        });
    </script>
</div>

サンプル2（少しカスタマイズ）