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'
});