[기능] DatePicker 달력 플러그인을 활용한 날짜 입력 하기 > 정보공유

그누보드5에는 달력으로 날짜를 선택할 수 있는 Dtepicker 플러그인이 기본적으로 포함되어 있습니다.

Datepicker 달력을 어떻게 활용하는지 살펴보겠습니다

1.우선 그누보드 플러그인 폴더에 있는 datepicker.php 파일을

해당스킨경로/write.skin.php 파일 상단에 아래와 같이 인클루드 하겠습니다.

<?php
/* 해당스킨경로/write.skin.php */
 
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
 
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style.css">', 0);
include_once(G5_PLUGIN_PATH.'/jquery-ui/datepicker.php');
?>

2.아래 스크립트도 파일 제일 하단쪽 스크립트가 있는 부분에 추가하겠습니다.

<!-- 해당스킨경로/write.skin.php -->
 
<script>
$(function(){
    $("#wr_1").datepicker({ changeMonth: true, changeYear: true, dateFormat: "yy-mm-dd", showButtonPanel: true, yearRange: "c-99:c+99", minDate: "+3d;", maxDate: "+365d;" });
});
</script>

3.그리고 입력 폼에 위 스크립트에서 설정한 id 값을 넣어줍니다.

<!-- 해당스킨경로/write.skin.php -->
 
<tr>
	<th scope="row"><label for="wr_1">날짜입력</label></th>
	<td><input type="text" name="wr_1" value="<?php echo $write["wr_1"]; ?>" id="wr_1" required class="frm_input" size="20" readonly="readonly"></td>
</tr>

2번 스크립트 부분에서 여러 옵션 값을 설정할 수가 있는데 몇 가지만 살펴본다면

날짜 표기 방식 : dateFormat: "yy-mm-dd"

예를 들어 이렇게 바꿔서 사용해도 됩니다.

yy-mm-dd : 2015-10-25

yy/mm/dd : 2015/10/25

yy.mm.dd : 2015.10.25

yymmdd : 20151025

시작 날짜 : minDate: "+3d;"

예를 들어 +3d 라면 3일 후 날짜부터 클릭이 가능하고 이전 날짜는 선택할 수 없게 비 활성화됩니다.

오늘 날짜부터 사용 가능하게 하려면 +0d으로 하면 되겠죠.

+, - 둘 다 설정 가능합니다. 그리고 이 부분을 삭제하면 yearRange 범위 안에서 제한 없이 클릭이 가능합니다.

생년월일을 입력받는 용도라면 삭제하는 게 낫겠네요.

최대 날짜 : maxDate: "+365d;"

예를 들어 +365d 로 하면 최대 365일 이후까지만 클릭이 가능하고 그 이후 날짜는 비활성화됩니다.

여기 또한 목적에 맞게 설정해서 사용하면 될 것 같습니다.

위 날짜 설정에서 숫자 뒤에

'd' 로 하면 (일) 단위,

'w' 로 바꾸면 (주) 단위,

'm' 으로 바꾸면 (월) 단위,

'y' 로 바꾸면 (년) 단위로 됩니다.

예를 들어 +365d 대신 +1y 로 사용할 수도 있습니다. 직접 해보시면서 어떻게 바뀌는지 확인해보세요.

다양한 옵션 상세 설정 : http://api.jqueryui.com/datepicker/

아래 내용은 위에서 설명한 내용을 참고해서 게시판 스킨 여분 필드 1번에 날짜를 입력받는 예제입니다.

수정파일 : 해당스킨경로/write.skin.php

- datepicker.php 파일 인클루드

- 입력 폼 추가

- 하단 스크립트 추가

위와같이 3군데에 소스코드를 추가하시면 되겠습니다.