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

본문 바로가기

정보공유

일반글
그누보드팁

[기능] DatePicker 달력 플러그인을 활용한 날짜 입력 하기

페이지 정보

게시물QR코드

본문

그누보드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군데에 소스코드를 추가하시면 되겠습니다.

댓글목록

등록된 댓글이 없습니다.

  • Addr.부산광역시 부산진구 중앙대로 666번길 50, 더샵센트럴스타 CEO. 이경애 Email. gnuwiz@naver.com
  • BR. 625-68-00172 TRC. 2019-부산해운대-1186 TEL. 0507-1382-2790
Copyright © 2017 ~ 그누위즈. All rights reserved.