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

웹개발자의 기지개

시간 선택 timepicker 본문

jquery

시간 선택 timepicker

웹개발자 워니 2019. 12. 14. 03:22

상기 그림과 같이 AM , PM 원하는 시간대를 설정할 수도 있고, 이를 select 박스 형태로 시간대를 선택할 수 있도록 해 준다.

 

jquery 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 writing is not your thing, you can also choos

timepicker.co

 

 

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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
 
</head>
<body>
 
<label for="time">시간 선택</label>
<input type="text" id="time1" name="time1" class="form-control" style="width:200px;">
 
<script>
$(function() {
    $("#time1").timepicker({
        timeFormat: 'h:mm p',
        interval: 60,
        minTime: '10',
        maxTime: '6:00pm',
        defaultTime: '11',
        startTime: '10:00',
        dynamic: false,
        dropdown: true,
        scrollbar: true        
    });
});
</script>
</body>
</html>
 cs

 

 

 

'jquery' 카테고리의 다른 글

jquery 다양한 modal 예제 (Bootstrap4 Modal Wrapper Plugin)  (2) 2020.03.03
trim() 문자열 앞뒤 공백제거  (1) 2019.12.15
간단하게 해당화면 보이기, 숨기기 기능 (토글 toggle기능)  (0) 2019.12.07
checkbox 체크 여부 , 적어도 하나는 체크해 주십시오  (0) 2019.07.30
select 박스 추가, 삭제  (0) 2019.07.30
'jquery' Related Articles more
Comments