JSP 달력 간단하게 만들어보기

프로그래밍|2013.02.01 22:14
JSP 달력 간단하게 만들어보기


안녕하세요 황금너구리입니다. JSP 달력만들기에 대해서 포스팅을 합니다. 요즘에 홈페이지 회원가입을 할 때에 많이 쓰는 유용한 기능입니다. 주로 생일을 선택을 할 때나 기념일 날짜 등 여러 군데에서 쓰이네요. 생각을 달리해보면 다양한 곳에 쓰일 수도 있어요.



달력을 소스를 공개해드리겠습니다. 크게 어렵지는 않습니다. 이대로 따라하시면 동작이 잘 될거에요. 이리 저리 자료를 찾아보던 도중에 저도 한 번 해보았습니다.


calendar_test.jsp


위의 달력은 cale_bg.jpg로 저장을 하시고 사용을 하세요.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content = "text/html; charset = utf-8">
<title>간단한 달력만들기</title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link rel = "stylesheet" href = "ui/jquery.mobile-1.2.0.min.css" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script language = "javascript" type = "text/javascript">
$(document).ready(function() {
 
  //******************************************************************************
  // 상세검색 달력 스크립트
  //******************************************************************************
  var clareCalendar = {
   monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
   dayNamesMin: ['일','월','화','수','목','금','토'],
   weekHeader: 'Wk',
   dateFormat: 'yymmdd', //형식(20120303)
   autoSize: false, //오토리사이즈(body등 상위태그의 설정에 따른다)
   changeMonth: true, //월변경가능
   changeYear: true, //년변경가능
   showMonthAfterYear: true, //년 뒤에 월 표시
   buttonImageOnly: true, //이미지표시
   buttonText: '달력선택', //버튼 텍스트 표시
   buttonImage: 'cale_bg.jpg', //이미지주소
   showOn: "both", //엘리먼트와 이미지 동시 사용(both,button)
   yearRange: '1990:2020' //1990년부터 2020년까지
  };
  $("#fromDt").datepicker(clareCalendar);
  $("#toDt").datepicker(clareCalendar);
  $("img.ui-datepicker-trigger").attr("style","margin-left:5px; vertical-align:middle; cursor:pointer;"); //이미지버튼 style적용
  $("#ui-datepicker-div").hide(); //자동으로 생성되는 div객체 숨김 
 });
</script>
</head>
<body>
<table border = "0">
<tr>
<td><input name="fromDt" type="text" id="fromDt" size="8" maxlength="8" value = ""></td>
<td> ~ </td>
<td ><input name="toDt" type="" id="toDt" size="8" maxlength="8" value=""></td>
</tr>
</table>
</body>
</html>

소스는 위와 같이 구성이 되어 있습니다. 약간은 복잡하지만 javascript 부분만 약간 복잡하고 나머지 html부분은 어느 정도 이해를 하실거라고 봅니다. 결과는 간단하게 아래와 같이 구성이 되어 있습니다.




달력 그림을 선택을 하게 되면 달력이 표시가 됩니다. 원하는 연도, 월, 일을 선택을 하실 수 있습니다. 홈페이지 제작을 하시는 분들은 이 걸 응용을 해보셔도 됩니다. 홈페이지를 제작중이신 분들은 참조를 하셔도 좋아요. 개발에는 정말로 끝이 없는거 같네요. 예술입니다. 예술.ㅎㅎ 다음에도 계속 포스팅을 하겠습니다.


댓글(2)