그누보드5 게시판 입력 폼에 jQuery UI Datepicker 달력 적용하기

• 목록
• 스크랩

그누보드5 게시판 입력 폼에 jQuery UI Datepicker 달력 적용하기

그누보드5 게시판 글쓰기 화면에서 텍스트 입력 대신 달력 팝업으로 날짜를 쉽게 선택할 수 있도록 jQuery UI Datepicker 플러그인을 연동하는 방법과 코드 적용 순서를 안내합니다.

그누보드5 글쓰기 스킨에 jQuery UI Datepicker 적용하기

그누보드5 게시판에서 날짜를 팝업 형태로 쉽게 선택할 수 있도록 jQuery UI Datepicker 플러그인을 연결하려면 파일 백업 후 스킨 상단 인클루드, 입력 폼 설정, 스크립트 선언 단계를 거쳐야 합니다. 단, 해당 플러그인은 그누보드5 기본 설치 환경에 포함된 jQuery UI 라이브러리를 기반으로 하므로, 테마나 스킨 설정에 따라 라이브러리 로드 여부를 먼저 확인해야 합니다.

1. 사전 준비 및 백업

코드를 수정하기 전 반드시 기존 write.skin.php 파일을 백업하여 원본을 보존해야 합니다. 문제가 발생할 경우 백업 파일을 통해 원래 상태로 안전하게 복구할 수 있습니다.

2. 상단 인클루드 코드 추가

글쓰기 스킨 파일인 write.skin.php 상단에 달력 플러그인 인클루드 코드를 추가합니다.

<?php
if (!defined('_GNUBOARD_')) exit;
include_once(G5_PLUGIN_PATH.'/jquery-ui/datepicker.php');
add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style.css">', 0);
?>

3. 입력 폼 및 스크립트 설정

날짜를 입력받을 input 태그에 id를 부여하고, 하단 스크립트 영역에 datepicker() 함수를 선언합니다. 직접 수동 입력을 방지하기 위해 readonly="readonly" 속성을 함께 적용할 수 있습니다.

<input type="text" name="wr_1" value="<?php echo $write["wr_1"]; ?>" id="date_wr_1" required class="frm_input" size="11" readonly="readonly">

<script>
$(function(){
    $("#date_wr_1").datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: "yy-mm-dd",
        showButtonPanel: true,
        yearRange: "c-99:c+99",
        minDate: "+3d;",
        maxDate: "+365d;"
    });
});
</script>

jQuery UI Datepicker 날짜 범위 제한 설정 방법

그누보드5 게시판 입력 폼에 적용한 jQuery UI Datepicker 스크립트 설정에서 minDate와 maxDate 옵션을 선언하여 사용자가 선택할 수 있는 최소 및 최대 날짜 범위를 지정할 수 있습니다.

스크립트 설정 예시

글쓰기 스킨 파일(write.skin.php) 하단의 자바스크립트 영역에서 datepicker() 함수 내부에 범위를 지정하는 옵션을 다음과 같이 포함할 수 있습니다.

<script>
$(function(){
    $("#date_wr_1").datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: "yy-mm-dd",
        showButtonPanel: true,
        yearRange: "c-99:c+99",
        minDate: "+3d;",
        maxDate: "+365d;"
    });
});
</script>

적용 후 확인 사항

코드를 수정하고 저장한 뒤, 게시판 글쓰기 화면으로 이동하여 날짜 입력란을 클릭했을 때 설정한 범위 내에서만 날짜 선택이 제한되는지 확인합니다.

날짜와 시간 동시 선택 환경에서의 추가 조치

날짜와 시간을 동시에 선택해야 하는 환경에서는 기본 jQuery UI Datepicker만으로는 시간 입력 기능을 지원하지 않습니다. 따라서 별도의 Timepicker 플러그인을 추가로 연동해야 하며, 이 경우 기존 Datepicker 스크립트와 충돌하지 않도록 별도의 JS 파일 로드 및 초기화 설정이 필요할 수 있습니다.

상황별 판단 가이드

내 상황	우선할 판단	다음 행동
코드를 수정하기 전인 경우	원본 파일 보존 우선	기존 write.skin.php 파일을 백업하여 안전한 복구 수단 마련
날짜와 시간의 동시 선택이 필요한 경우	추가 플러그인 필요 여부 확인	기본 Datepicker 외에 별도의 Timepicker 플러그인 연동 검토
날짜 입력 범위를 제한해야 하는 경우	스크립트 옵션 설정	minDate와 maxDate 값을 지정하여 선택 가능 범위 제한

실전 FAQ

Q. 코드를 수정하다가 오류가 발생했을 때는 어떻게 되돌리나요?

사전에 백업해 둔 write.skin.php 원본 파일을 다시 업로드하여 원래 상태로 안전하게 복구할 수 있습니다.

Q. 사용자가 키보드로 임의의 날짜를 직접 입력하는 것을 막으려면 어떻게 해야 하나요?

입력 폼 input 태그에 readonly="readonly" 속성을 함께 적용하여 직접 수동 입력을 방지할 수 있습니다.

참고자료

기타 참고자료

• mercury-seed.com — 그누보드5 게시판 입력 폼에 jQuery UI Datepicker 달력 적용하기