WORK/JQUERY

jquery 시,분 선택하기

im 수캥이 2018. 4. 12. 16:54
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 파일은 아래에서 다운 받으면 된다.


jquery.timepicker.css

jquery.timepicker.min.js


'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