Notice
Recent Posts
Recent Comments
Tags more
«   2026/06   »
일 월 화 수 목 금 토
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
Archives
Today
Total
관리 메뉴

웹개발자의 기지개

[Javascript] timepicker 사용하기 본문

javascript

[Javascript] timepicker 사용하기

웹개발자 워니 2024. 3. 23. 03:02

datepicker 가 있다면 이번에는 타임피커를 써보자.

 

 

 

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
 
 
<form name="f" method="post" enctype="multipart/form-data">
 
<input type="text" id="movie_start_date" name="movie_start_date" class="form-control" placeholder="" value="" readonly> 
<input type="text" id="movie_start_time" name="movie_start_time" class="form-control" placeholder="" value="" readonly>
 
<input type="text" id="movie_end_date" name="movie_end_date" class="form-control" placeholder="" value="" readonly> 
<input type="text" id="movie_end_time" name="movie_end_time" class="form-control" placeholder="" value="" readonly>
 
</form>
 
<script>
$(function() {
 $("#movie_start_date, #movie_end_date").datepicker({
     showMonthAfterYear:true,
     monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
     dayNamesMin: ['일','월','화','수','목','금','토'],
     showAnimation: 'slider',
     dateFormat: 'yy-mm-dd',
     showOtherMonths: true,
     selectOtherMonths: true,
     changeMonth: true,
     changeYear: true
 });
 
 
     $('#movie_start_time')
        .timepicker({
            timeFormat: 'HH:mm',
            interval: 1,
            minTime: '00',
            maxTime: '11:59pm',
            defaultTime: '',
            startTime: '00:00',
            dynamic: false,
            dropdown: true,
            scrollbar: true
        });
 
     $('#movie_end_time')
        .timepicker({
            timeFormat: 'HH:mm',
            interval: 1,
            minTime: '00',
            maxTime: '11:59pm',
            defaultTime: '',
            startTime: '00:00',
            dynamic: false,
            dropdown: true,
            scrollbar: true
        });
});
</script>
 
 cs

 

interval 은 분단위

defaultTime 은 최초 시간을 임의 지정할 수 있다.

 

아래의 좋은 포스팅 글을 참고하면 더욱 좋겠다.

 

https://koopi.tistory.com/35

 

[팀프로젝트] datepicker / Timepicker 적용하기

https://timepicker.co/ jQuery Timepicker jQuery Timepicker is a plugin to help users easily input time entries. It can parse the most used time representations allowing you and your users to enter time using their prefered way for writing it. Also, if writ

koopi.tistory.com

 

 

참고  : https://timepicker.co/

'javascript' 카테고리의 다른 글

[Javascript] querySelectorAll, querySelector, 여러개의 동일한 클래스명내에 특정한 태그내 text값 얻기  (1) 2024.04.04
[Javascript,PHP] 카카오지도 에서 화살표 표시하기1 (DB에 GPS 좌표값 저장하기)  (1) 2024.03.26
[Javascript] 팝업창 차단시 알림기능 (팝업차단 해제)  (0) 2024.03.06
[Javascript] 팝업창에서 새창으로 특정사이트이동하고 팝업창은 닫기  (0) 2024.03.05
[Javascript] 현재위치 gps 구글지도 표시  (0) 2024.02.18
'javascript' Related Articles more
Comments