Jquery calendar

From JCFWiKi

목차 1 개요 2 jQuery의 Datepicker 2.1 입력할 항목 확인 2.2 StyleSheet와 Js 파일 추가하기 2.3 입력항목에 달력추가 스크립트 작성하기 3 결과 화면 보기

[편집] 개요

웹 화면에서 날짜 선택시 많이 사용되는 달력 컴포넌트의 사용법이다.

• 달력 컴포넌트는 아래 조건을 만족하도록 한다.
  • 기존 달력 컴포넌트의 경우 ComboBox와 중복될 경우 Combo 아래에 달력이 생성되어 문제가 되었으므로 이를 보완할 수 있도록 한다.
  • 가급적 웹표준을 준수하고 자바스크립트의 코딩이 간결해 지도록 한다.
  • 다른 컴포넌트나 폼요소와의 종속성을 배제한다.

[편집] jQuery의 Datepicker

[편집] 입력할 항목 확인

현재 예는 게시기간을 입력하는 부분에서 시작일과 종료일 텍스트 입력항목에 달력을 추가하고자 한다.

<tr>
<td bgcolor="F2F2F2">게시기간
<td bgcolor="#FCFCFC">
	<s:textfield id="strFromDate" name="notice.strFromDate" theme="simple" size="10" readonly="true"/> ~
	<s:textfield id="strToDate" name="notice.strToDate" theme="simple" size="10" readonly="true"/>
</td>
</tr>

[편집] StyleSheet와 Js 파일 추가하기

JQuery의 달력은 몇 가지 종류가 있지만, 그간 프로젝트에서 가장 선호하는 형태이자 (상단에 년월이 표시되는) 달력의 모양도 CSS를 통해 수정이 용이하므로 다음을 사용하도록 한다. 우선 달력을 추가하기 위해 화면에 다음을 추가한다.

• StyleSheet
  • flora.datepicker.css
  • datePicker.css
• JavaScript
  • datepicker.js
  • ui.datepicker.js

<link rel="stylesheet" href="css/flora.datepicker.css" 
     type="text/css" media="screen" title="Flora (Default)">
<link rel="stylesheet" href="css/datePicker.css" type="text/css"/>
<script src="js/jquery/datepicker.js"></script>
<script src="js/jquery/ui.datepicker.js"></script>

[편집] 입력항목에 달력추가 스크립트 작성하기

문서의 ready 부분에 다음을 추가한다. 이 때, # 부분에 들어가는 값은 입력 텍스트 필드의 id 명을 의미한다. 지금 시작일(id:strFromDate)과 종료일(id:strToDate) 두 필드에 넣고자 하므로, 다음과 같이 작성한다.

<script>
	  $(document).ready(function(){
	   $('#strFromDate').datepicker();
	   $('#strToDate').datepicker();
	  });
</script>

[편집] 결과 화면 보기

다음과 같이 텍스트 필드를 클릭시 달력이 화면에 뿌려지는지 확인한다.