DateTimepicker ( Timepicker + Datepicker )

by 조쉬 posted Mar 26, 2021
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄

Datepicker는 날짜만 표시 해주지만, 이건 날짜 + 시간까지 필요할때 유용하다.
소스를 보면 알겠지만, Datepicker에 Timepicker를 붙인것이다.

<html>
<head> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript" ></script>
<script src=" https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript" ></script>
<script src="./js/jquery-ui-timepicker-addon.js" type="text/javascript" ></script>
</head>
<body> 

<input type="text" name="test" id="test" value="" >

<script type="text/javascript">
$('#test').datetimepicker();
</script>

</body> 
</html> 

참조 : http://trentrichardson.com/examples/timepicker/
위의 링크에 가면 자세한 사용법이 나와 있고 jquery-ui-timepicker-addon.js도 구할수 있다.
(일단 첨부파일로 해놓긴 했다.)

jquery 기본 소스와 ui 소스는 구글(googleapis)을 이용했기 때문에 따로 안받아도 되지만, timepicker소스는 따로 다운 받아야 할것이다.

그리고 이벤트 발생으로 쓰는것이 아니라, 위 처럼 쓴다면, datatimepicker()를 input태그 다음에 선언해야 제대로 된다는걸 알아두길 바란다.

예제

$('#test').datetimepicker({
  showSecond: true,
  dateFormat: 'yy-mm-dd',
  timeFormat: 'hh:mm:ss'
});