"JQuery UI 시간선택기 timepicker"의 두 판 사이의 차이

2020년 11월 2일 (월) 02:53 기준 최신판

1 개요[ | ]

jQuery UI 시간선택기 timepicker
jQuery UI 플러그인 타임피커

jQuery UI datepicker는 jQuery UI에 포함되어 있지만, timepicker는 없음
플러그인을 이용해야 함

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<link rel="stylesheet" href="//cdn.rawgit.com/fgelinas/timepicker/master/jquery.ui.timepicker.css">
<script src='//cdn.rawgit.com/fgelinas/timepicker/master/jquery.ui.timepicker.js'></script>
<script>
$(function() {
    $('.timepicker').timepicker();
});
</script>
    
<input type="text" class='timepicker'>

2 같이 보기[ | ]

3 참고[ | ]

https://github.com/fgelinas/timepicker

@@ 1번째 줄: / 1번째 줄: @@
 ==개요==
 ;jQuery UI 시간선택기 timepicker
-;jQuery UI 플러그인 timepicker
+;jQuery UI 플러그인 타임피커
+*[[jQuery UI datepicker]]는 jQuery UI에 포함되어 있지만, timepicker는 없음
+*플러그인을 이용해야 함
-<source lang='html5'>
+<syntaxhighlight lang='html5'>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
 <script src="//code.jquery.com/jquery.min.js"></script>
@@ 12번째 줄: / 14번째 줄: @@
 <script>
 $(function() {
-     $('#mytime').timepicker();
+     $('.timepicker').timepicker();
 });
 </script>
-<input type="text" id='mytime'>
+<input type="text" class='timepicker'>
-</source>
+</syntaxhighlight>
-<jsfiddle height='300'>76pwtxg4</jsfiddle>
+<jsfiddle height='250'>76pwtxg4</jsfiddle>
 ==같이 보기==
-*[[jQuery UI datepicker]]
+*[[jQuery UI timepicker 크기 조정]]
+*[[jQuery UI 날짜선택기 datepicker]]
-[[분류: jQuery]]
+==참고==
+*https://github.com/fgelinas/timepicker
+[[분류: jQuery UI]]