DatePicker 달력 플러그인을 활용한 날짜 입력 쉽게하기 > 그누보드 게시판스킨 강좌

본문 바로가기
전체검색

아이디비번찾기

그누보드 게시판스킨 강좌

그누보드 영카트 초보 사용자를 위한 기본 매뉴얼, 스킨 제작 기초강좌를 공유합니다.

DatePicker 달력 플러그인을 활용한 날짜 입력 쉽게하기

페이지 정보

작성자 관리자 작성일15-10-17 20:21 조회5,333회

본문

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

 

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

 

 

1. 우선 플러그인 폴더에 있는 datepicker.php 파일을 인클루드 하고

 

include_once(G5_PLUGIN_PATH.'/jquery-ui/datepicker.php');

 

 

2. 아래 스크립트도 추가해야 합니다.

 

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

 

 

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

 

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

 

 

 

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/



추가 내용


특정 요일을 지정해서 선택막기

빨간색 부분이 추가되었습니다.

day != 0 부분이 요일 선택 부분인데 (0~6 까지 순서대로 일요일~토요일 순)


예를 들어 일요일은 선택 금지하려면 이렇게..


$(function(){

    $("#date_wr_1").datepicker({

        changeMonth: true,

        changeYear: true,

        dateFormat: "yy-mm-dd",

        showButtonPanel: true,

        yearRange: "c-99:c+99",

        minDate: "+3d;",

        maxDate: "+365d;",

        beforeShowDay: function(date) {

            var day = date.getDay();

            return [(day != 0), ''];

        }

    });

});



특정일을 지정해서 선택막기

함수를 추가하고 옵션에 beforeShowDay: disableAllTheseDays 한 줄 더 넣은 겁니다.


$(function(){


   // 날짜지정

    var disabledDays = ["2017-9-21", "2017-9-23", "2017-9-27"];


    // 특정일선택막기

    function disableAllTheseDays(date) {

        var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();

        for (i = 0; i < disabledDays.length; i++) {

            if($.inArray(y + '-' +(m+1) + '-' + d,disabledDays) != -1) {

                return [false];

            }

        }

        return [true];

    }


    $("#date_wr_1").datepicker({

        changeMonth: true,

        changeYear: true,

        dateFormat: "yy-mm-dd",

        showButtonPanel: true,

        yearRange: "c-99:c+99",

        minDate: "+3d;",

        maxDate: "+365d;",

        beforeShowDay: disableAllTheseDays

    });

});


특정일만 지정해서 입력받기

위 함수를 반대로 설정하면 되지 않을까 싶네요. 위쪽은 true로 아래쪽은 false 로..




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

 

수정파일 : write.skin.php

 

* 빨간색으로 강조된 부분이 수정되거나 추가된 부분입니다.

 

- datepicker.php 파일 인클루드

- 입력 폼 추가

- 하단 스크립트 추가

 

총 3군데 부분이 수정되었습니다.

중간 내용들은 대부분 생략했습니다 추가된 코드만 보시면 됩니다.

 

 

<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

include_once(G5_PLUGIN_PATH.'/jquery-ui/datepicker.php');
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style.css">', 0);
?>


<section id="bo_w">
    <h2 id="container_title"><?php echo $g5['title'] ?></h2>

    <!-- 게시물 작성/수정 시작 { -->
    <form name="fwrite" id="fwrite" action="<?php echo $action_url ?>" onsubmit="return fwrite_submit(this);" 

    .....................

    .....................

        .....................

        .....................

        <tr>

            <th scope="row">옵션</th>
            <td><?php echo $option ?></td>
        </tr>
        <?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="date_wr_1" required class="frm_input" size="11" readonly="readonly"></td>
        </tr>

        <?php if ($is_category) { ?>

        <tr>

            <th scope="row"><label for="ca_name">분류<strong class="sound_only">필수</strong></label></th>

            <td>

                <select name="ca_name" id="ca_name" required class="required" >

                    <option value="">선택하세요</option>

                    <?php echo $category_option ?>

                </select>

            </td>

        </tr>

        <?php } ?>

        ....................

        ....................        

    .....................

    .....................

    <div class="btn_confirm">
        <input type="submit" value="작성완료" id="btn_submit" accesskey="s" class="btn_submit">
        <a href="./board.php?bo_table=<?php echo $bo_table ?>" class="btn_cancel">취소</a>
    </div>
    </form>


    <script>

    <?php if($write_min || $write_max) { ?>

    // 글자수 제한

    var char_min = parseInt(<?php echo $write_min; ?>); // 최소

    var char_max = parseInt(<?php echo $write_max; ?>); // 최대

        .................................

        .................................

        .................................

        <?php echo $captcha_js; // 캡챠 사용시 자바스크립트에서 입력된 캡챠를 검사함  ?>

        document.getElementById("btn_submit").disabled = "disabled";

        return true;

    }


    $(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>

</section>

<!-- } 게시물 작성/수정 끝 -->

 

 

 

적용하면 아래 스샷처럼 달력이 팝업 되고 설정된 기간 내의 날짜만 선택이 가능합니다.

 

bd75b67f5146b316ad9d1f815a6da3ca_1445927563_88.gif 

관리자님의 댓글

관리자

시간까지 동시에 입력하고 싶을 때는 Dtepicker 대신에 Timepicker
https://github.com/trentrichardson/jQuery-Timepicker-Addon

로그인 후 댓글을 남겨주세요.
그누보드 게시판스킨 강좌 목록
번호 제목
공지 게시판 스킨 강좌 공지사항입니다.
1 게시판 기본 스킨 목록 페이지 살펴보기 1 - list.skin.php 댓글1
2 게시판 기본 스킨 목록 페이지 살펴보기 2 - 상세 설명
3 게시판 기본 스킨 글쓰기 페이지 살펴보기 1 - write.skin.php 댓글2
4 게시판 기본 스킨 글쓰기 페이지 살펴보기 2 - 상세 설명
5 게시판 기본 스킨 내용보기 페이지 살펴보기 1 - view.skin.php
6 게시판 기본 스킨 내용보기 페이지 살펴보기 2 - 상세 설명
7 게시판 기본 스킨 코멘트 페이지 살펴보기 1 - view_comment.skin.php
8 게시판 기본 스킨 코멘트 페이지 살펴보기 2 - 상세 설명
9 여분필드를 활용한 게시판 스킨 제작 - 기본적인 사용 방법 댓글4
10 여분필드를 활용한 게시판 스킨 제작 - 기초 예제1-1 (글쓰기 페이지)
11 여분필드를 활용한 게시판 스킨 제작 - 기초 예제1-2 (목록 페이지) 댓글3
12 여분필드를 활용한 게시판 스킨 제작 - 기초 예제1-3 (글읽기 페이지)
13 여분필드에 스마트 에디터 사용하기
열람중 DatePicker 달력 플러그인을 활용한 날짜 입력 쉽게하기 댓글1
15 게시판 글쓰기 완료 후 목록 페이지나 메인 페이지로 이동시키기
16 게시판 목록 및 내용보기 페이지에 회원 정보 여분필드 출력 방법
17 이름이나 전화번호 중간 부분을 *** 표시로 숨기기 댓글2
18 게시판 글쓰기 페이지에 다음 주소 API 입력기 사용하기 댓글4
19 게시판 스킨 목록 페이지에 이전 다음 페이지 링크 만들기
20 게시판 설정에 있는 여분 필드란 무엇인가?
21 여분필드를 활용한 게시판 스킨 제작 - 여분 필드 10개 이상 사용하기 댓글8
22 배열을 사용해서 여분필드 한 개로 연락처 입력란 3등분하기
23 글쓰기 페이지에서 게시물 수정 모드일 때 삭제 버튼 링크 추가하기 댓글1
24 휴대폰번호 중간에 자동으로 하이픈(-) 넣기
25 게시판 목록페이지 상단 분류를 이미지로 변경
26 글 수정 모드에서 첨부된 파일 다운로드 링크 추가
27 게시판이나 최신글 목록에서 비밀글 제목은 숨김 처리
28 input 필드값을 입력받을 때 무조건 숫자만 입력 댓글1
29 글 수정모드에서 첨부된 이미지 썸네일로 미리보기 댓글3
30 제목 또는 내용 없이 글 작성하기 - 설정해 놓은 문구 자동 입력
31 본문에 댓글을 남겼는지 체크해서 활용하기 댓글5
32 코멘트 비밀글 체크박스 삭제시 문제 해결
33 본문 페이지에서 특정 이미지를 선택해서 출력하는 방법
34 글 보기 페이지에 이전글 다음글 제목 날짜 출력 댓글1
35 링크 주소 입력 개수 늘리는 방법
36 기본 gallery 스킨에서 공지사항도 썸네일 이미지 출력
37 새 코멘트가 등록되었을 때 게시판 목록에 new 아이콘 출력 댓글6
38 리스트 정렬 필드를 여분필드값 기준으로 정렬하는 방법
39 신청서나 예약 게시판 등에서 글을 작성할 때 회원 정보에 있는 값 가져오기
게시물 검색


그누스터디는 그누보드, 영카트 초보 사용자를 위한 정보를 공유합니다.

Copyright © GNUSTUDY. All rights reserved.
상단으로