datepicker.jsp몇년간 써 오던 달력 자바스크립트가 IE와 크롬에서는 정상적으로 작동이 되었으나
이놈의 Firefox에서는 오 작동을 하는 것을 발견하였다.
회사 정책상 모든 자바스크립트는 jQuery로 변환 또는 신규 구현중이라서, 이번 참에 jQuery 달력 소스를 찾아 구현 해보았습니다.
첫째
달력(datepicker) core 를 다운로드 받습니다.
http://jqueryui.com/download
우측 사이드바 보시면 다운로드 이미지가 있습니다 (2009년 12월 17일 기준)
둘째
zip파일을 풀고, 여기저기 소스를 찾아 보면 아주 간단한 샘플이 있습니다.
셋째
꼭 필요한 js파일만 프로젝트 폴더에 포함 시키거나 귀찮으신분은 모두 포함 해주세요
넷째
아래와 같이 구현 해보세요
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html; charset=utf-8" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" href="/common/css/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="/common/js/jquery/jquery.js"></script>
<script type="text/javascript" src="/common/js/jquery/jquery-1.3.2.js"></script>
<script type="text/javascript" src="/common/js/jquery/ui/ui.core.js"></script>
<script type="text/javascript" src="/common/js/jquery/ui/ui.datepicker.js"></script>
<link type="text/css" href="/common/css/demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<div class="demo">
<p>Date: <input type="text" id="datepicker"></p>
</div>
</body>
</html>
다섯째
소스는 첨부 합니다. 소스가 어디서나 바로 실행이 안되는것은 다들 아시죠??????
가끔 말도 안되는 짜증을 저에게 하시는분들이 있어서 ㅡ.ㅡ;;;;
소스 다운로드 받으신분들은 자신의 환경에 맞게 고쳐서 보세요 ~~~
'프로그래밍언어 > 패턴, 알고리즘, 프로토콜' 카테고리의 다른 글
| jQuery autocomplete.js 개발자 맘대로 환경 바꾸기 (0) | 2010.02.06 |
|---|---|
| serialVersionUID Warning 멧세지 처리 (0) | 2010.01.07 |
| STRUTS2+iBatis 계층형 게시판 만들기 (4) (0) | 2009.12.14 |
| STRUTS2+iBatis 계층형 게시판 만들기 (3) (0) | 2009.12.14 |
| STRUTS2+iBatis 계층형 게시판 만들기 (2) (0) | 2009.12.14 |
댓글