HTML

<!--css-->
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.min.css">

<input type="text" id="input">
<div id="calendar" style="display: none;"></div>

<!--javascript-->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="jquery.datetimepicker.min.js"></script>

JAVASCRIPT

$(document).ready(function(){
    $('#calendar').datetimepicker({
		date: new Date(),
        viewMode: 'YMDHMS',
        onDateUpdate: function(){		
			var year = this.getText().slice(0,4);
			var month = this.getText().slice(5,7);
			var day = this.getValue().toString().slice(0,3);
			var date = this.getText().slice(8,10);
			var hour = this.getText().slice(11,13);
			var minute = this.getText().slice(14,16);
			var second = this.getText().slice(17,19);
			
			$('#input').val(year + '-' + month + '-' + date + ' ' +
                            day + ' ' + hour + ':' + minute + ':' + second);
        }
	});
	
	$('#input').click(function(){
		$('#calendar').fadeIn(200);
	});
	
	$('table.buttonpane > tbody > tr > td.ok').click(function(){
		$('#calendar').fadeOut(200);
	});
});

REFERENCE

  1. 'jquery.datetimepicker.min.js', 'jquery.datetimepicker.min.css' 다운로드 링크
profile
TJ

0개의 댓글