1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | // 아래 두개파일이 있어야 한다. <script type="text/javascript" src="/js/timepicker/jquery.timepicker.min.js" ></script><!-- 타이머js --> <link type="text/css" rel="stylesheet" href="/js/timepicker/jquery.timepicker.css" media=""/><!-- 타이머css --> <script type="text/javascript"> $(document).ready(function() { // INPUT 박스에 들어간 ID값을 적어준다. $("#START_TIME,#END_TIME").timepicker({ 'minTime': '09:00am', // 조회하고자 할 시작 시간 ( 09시 부터 선택 가능하다. ) 'maxTime': '20:00pm', // 조회하고자 할 종료 시간 ( 20시 까지 선택 가능하다. ) 'timeFormat': 'H:i', 'step': 30 // 30분 단위로 지정. ( 10을 넣으면 10분 단위 ) }); $(window).scroll(function(){ $(".ui-timepicker-wrapper").hide(); }); }); </script> <body> <tr> <th>이용시간</th> <td> <input type="text" name="START_TIME" id="START_TIME" value="" maxlength="10" class="setDatePicker"> ~ <input type="text" name="END_TIME" id="END_TIME" value="" maxlength="10" class="setDatePicker"> </td> </tr> </body> | cs |
timepicker 파일은 아래에서 다운 받으면 된다.
'WORK > JQUERY' 카테고리의 다른 글
ajax 에서 return false 보내기 (0) | 2018.05.16 |
---|---|
JQUERY 생년월일 입력하기. (0) | 2018.04.20 |
동일한 input name 값 가져오기 (2) | 2018.04.06 |
li 태그 클래스 바꾸기 (0) | 2018.03.01 |
jquery 모든 div 제어하기 그리고 체인 (0) | 2018.03.01 |