DATE PICKER을 사용해서 달력 출력

script로 input 박스 선택시 달력 출력하는 방법을 알아보자

요즘은 스크립트가 잘되어있어서 제대로된 스크립트만 참고하면 가능하다

 

<input type="text" id="date_picker">

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

$(function () {
	$("#date_picker").datepicker({
		dateFormat: 'yy-mm-dd'
    });
)}

 

날짜 뿐만아니라 시간까지 출력하고 싶다면

<input type="text" id="datetime_picker">

<link rel="stylesheet" href="http://cdn.rawgit.com/xdan/datetimepicker/master/jquery.datetimepicker.css">
<script src="http://cdn.rawgit.com/xdan/datetimepicker/master/jquery.datetimepicker.js"></script>
<script src="/js/jquery.datetimepicker.full.min.js"></script>

$(function () {
    $("#datetime_picker").datetimepicker({
        format: 'y-m-d H:i'
    });
});

datetime picker를 이용하면된다

 

참고

https://jqueryui.com/datepicker/