티스토리 뷰

[JQuery] JQuery를 이용한 달력

웹페이지를 프로그래밍 하다보면 년,월,일 등의 날짜를 입력해야 할 필요가 있는데요. 그런 때 달력이 필요하죠? 그런데 달력을 직접 만들자니 그렇고... 또 인터넷에 있는 소스를 또 그대로 가져다 쓰자니 또 그렇고 여러가지 고민이 되었습니다.


그런데 JQuery에서 제공하는 Datepicker라는 녀석을 이용하니 금방 되더라구요. 


디자인은 투박하지만 달력으로의 기능은 문제없으니 간단하게 사용해주면 될 것 같네요.



Datepicker라고 해서 소스가 길 것 같다구요? 소스도 간단합니다.


<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
 $(function() {
  $("#datepicker").datepicker();
 });
</script>
</head>
<body>
 <p>
  Date: <input type="text" id="datepicker" />
 </p>
</body>
</html>


위의 소스를 그대로 복사 & 붙여넣기 하시면 JQuery를 이용한 간단한 달력이 완성됩니다.




소스 응용하기


위의 소스를 조금만 응용해 볼까요?

위에 보이는 실행 결과와 조금은 다른 화면임을 알 수 있는데요. 


년도와 월을 콤보박스 형태로 선택할 수 있고 월과 요일이 한글로 나오네요. 소스코드를 어떻게 수정하면 되는지 아래의 소스를 보시기 바랍니다.



<script type="text/javascript">
 $(function() { 
  $(".datepicker").datepicker({
	dateFormat: 'yymmdd',
	monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
     dayNamesMin: ['일','월','화','수','목','금','토'],
	 changeMonth: true, //월변경가능
     changeYear: true, //년변경가능
	 showMonthAfterYear: true, //년 뒤에 월 표시
  });
 });
</script>



더 자세한 정보는 아래의 페이지를 참고하세요.


http://jqueryui.com/datepicker/


신고

Recent Comments