jQuery의 datepicker를 이용해서 날짜를 선택할 수 있는 편리한 기능이다.
모양은 투박하지만 jQuery를 이용할 경우, 보다 편리하게 달력을 이용해서 일자를 선택할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<style>
.ui-datepicker{ font-size: 12px; width: 200px; }
.ui-datepicker select.ui-datepicker-month{ width:30%; font-size: 11px; }
.ui-datepicker select.ui-datepicker-year{ width:40%; font-size: 11px; }
</style>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$("#datepicker").datepicker({
dateFormat:'yy.mm.dd', //선택된 날짜 포맷(yyyy.mm.dd)
monthNamesShort: ['1월','2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
monthNames: ['1월','2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
dayNamesShot: ['일', '월', '화', '수', '목', '금', '토'],
dayNames: ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'],
firstDay: 1, //0: 일요일 부터 시작, 1:월요일 부터 시작
autoSize: true, //default: false, input 사이즈를 자동으로 리사이즈.
showAnim: "fold", //default: show
showButtonPanel: true, //하단에 Today, Done 버튼 Display
showWeek: false, //주차 보이기
weekHeader: "주차", //default: Wk, 주차 헤드 부분의 명칭 설정
changeMonth: true, //월 변경가능
changeYear: true, //년 변경가능
showMonthAfterYear: true, //년 뒤에 월 표시
gotoCurrent: false //default: false, true일 경우에는 Today버튼 클릭 시 현재 일자로 이동하지 못함. false는 가능.
});
});
function getDate() {
alert($("#datepicker").datepicker("getDate"));
}
</script>
</head>
<body>
<p>
Date: <input type="text" id="datepicker" /> <input type="button" id="btnDate" value="가져오기" onclick="getDate()" />
</p>
</body>
</html>
