Javascript: datepicker에 시간 설정 추가하기 (datepicker + timepicker)

input태그를 이용한 플러그인인 datepicker를 쓰면서 시간까지 설정해야 하는 경우가 있다.

고맙게도 기존의 datepick를 이용한 datetimepick 플러그인이 존재한다..!!

 

- 파일 다운로드

jquery-ui-timepicker-addon.css

다운로드

jquery-ui-timepicker-addon.js

다운로드

 

- 코드

1) CSS 파일 load

<link rel="stylesheet" href="/resources/css/jquery-ui-timepicker-addon.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />

 

2) js파일 load 및 설정

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="/resources/js/jquery-ui-timepicker-addon.js"></script>
<script>
	$("#regdate").datetimepicker({
		dateFormat:'yy-mm-dd',
		monthNamesShort:[ '1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월' ],
		dayNamesMin:[ '일', '월', '화', '수', '목', '금', '토' ],
		changeMonth:true,
		changeYear:true,
		showMonthAfterYear:true,

		// timepicker 설정
		timeFormat:'HH:mm:ss',
		controlType:'select',
		oneLine:true,
	});
</script>