[jQuery] clockpicker 사용방법, 예제 (시간선택, 시계모양 UI)

Clockpicker는 시간 선택 기능을 제공하는 jQuery 플러그인입니다. 사용자가 웹 페이지에서 시간을 선택할 수 있는 시계 모양의 UI를 제공하고, 다양한 시간 형식을 지원합니다.

jQuery 라이브러리와, Clockpicker 스타일, Clockpicker 라이브러리를 include 해주시고 사용하시면 됩니다.

 

다양한 옵션과 이벤트 핸들링을 처리할 수 있으니 참고하셔서 응용하시면 됩니다.

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.min.js" /></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/jquery-clockpicker.min.js" /></script>
<div>
	<label>운영시간</label>
	<div style="display:table; width:300px;">
		<input type="text" class="form-control input-sm clockpicker" name="strTime" id="strTime" data-autoclose="true" data-mask="99:99" data-placement="bottom" />
		<span class="input-group-addon" style="line-height:0px">~</span>
		<input type="text" class="form-control input-sm clockpicker" name="endTime" id="endTime" data-autoclose="true" data-mask="99:99" data-placement="bottom"/>
	</div>
</div>

<script type="text/javascript">
$('.clockpicker').clockpicker();
</script>

 

소스 화면

 

소스 화면

소스 화면