jquery timepicker 시간선택

아래 그림처럼 jquery timepicker 를 이용하여 시간 select 하기.

1. 필요한 파일

jquery.timepicker.css

jquery.timepicker.min.js

다운로드 : 

jquery-timepicker.zip

두 파일을 적당한 곳에 올리고 timepicker를 적용할 파일에 인클루드 한다.

<input type="text" name="time1" value="" placeholder="시간선택"  id="time1" required size="8" maxlength="5">

2. 

$("#time1").timepicker({

step: 5,            //시간간격 : 5분

timeFormat: "H:i"    //시간:분 으로표시

});

기타 timeFormat 옵션

H : 24시간제로 표시

h : 12시간제로 표시

i : 분

s : 초

A : AM/PM표시

H:i:s : 24시간:분:초 로 표시

H:i A : 24시간:분 AM으로 표시

페이지 로딩시 현재시간 자동으로 입력.

$(document).ready(function(){

$("#time1").timepicker('setTime', new Date());

});

기타 자세한 내용은 아래 링크에서 확인

https://github.com/jonthornton/jquery-timepicker

끝.