The jQuery library “ClockPick” for easy time input was convenient, so taking notes on how to use it.
・jNathanson.com | the interwebs home of josh nathanson
■ Setting up js/css files
Download “jquery.clockpick.1.2.9.min.js” and “clockpick.1.2.9.css” from the above site and set them up.
■ Modifying CSS files
By default, the font size is 9px which is too small and hard to see, so I changed it to 18px.
Modified the font size specifications in both .CP_hour and .CP_minute sections.
■ JavaScript
I configured it for commonly used 24-hour format with 5-minute intervals.
■ HTML Source
■ Options
・starthour：開始時間（デフォ8） ・endhour：終了時間（デフォ18） ・showminutes：分の表示（デフォTrue、False） ・minutedivisions：分の刻み（デフォ4） ・military：AM/PMの表記（デフォFalse、True） ・event：時間の出し方（デフォClick、Mouseover） ・layout：時間の表示方法（デフォvertical、Horizontal）・starthour: Start hour (default 8) ・endhour: End hour (default 18) ・showminutes: Show minutes (default True, False) ・minutedivisions: Minute intervals (default 4) ・military: AM/PM notation (default False, True) ・event: How to display time (default Click, Mouseover) ・layout: Time display method (default vertical, Horizontal)
That’s all from the Gemba regarding jQuery ClockPick time picker.
【References】