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

본문 바로가기
전체검색

그누스킨닷컴

그누보드 게시판스킨 강좌

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

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

페이지 정보

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

본문

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

 

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

 

 

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

 

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

태봉님의 댓글

태봉

혹시 해당란에 직접 입력을 막으려면 어떻게 해야할까요?

관리자님의 댓글

관리자 댓글의 댓글

본문 내용에 이미 답이 있습니다. 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">

태봉님의 댓글

태봉 댓글의 댓글

아 제가 id 뒷부분을 빼놓아서 직접입력이 됐던거군요
알려주셔서 감사합니다 (_ _)

커뮤니티는 당분간 중단하겠습니다.
그누보드 게시판스킨 강좌 목록
번호 제목
공지 게시판 스킨 강좌 공지사항입니다.
95 특정 게시물 댓글 작성 및 출력 금지하기
94 특정 게시판에 지정된 회원만 글쓰기 허용하기
93 게시판 목록 카테고리 SELECT 형태로 변경
92 하루 동안 등록할 수 있는 댓글 수 제한하기
91 자동등록방지 캡챠(captcha) 무조건 사용하기
90 갤러리 스킨 목록에서 썸네일 대신 원본 이미지로 출력
89 댓글 수정 금지하기
88 임시 저장된 글 기능 삭제하기
87 댓글 비밀글 체크박스 무조건 체크 상태로 만들기
86 특정 회원 아이디 값을 지정해서 해당 회원이 작성한 글처럼 올리기
85 여분필드 사용 시 배열을 사용해서 체크박스 항목 만드는 방법
84 게시판 목록 페이지에 수정 삭제 버튼 출력
83 특정 게시판 제목 필수 입력 해제하기
82 게시판에 등록된 글 삭제시 관리자에게 SMS 문자 발송하기
81 첨부 파일을 다운로드하면 자동으로 추천하기
80 비추천 개수가 일정수 이상이면 게시글 삭제하기
79 게시판 목록에서 각종 아이콘 출력 부분을 이미지로 변경
78 이메일 주소 직접 입력과 특정 도메인을 선택해서 입력
77 게시판에 글 등록시 관리자에게 SMS 문자 발송하기
76 특정 회원만 게시판 내용을 볼 수 있게 아이디를 지정해서 글 등록하기
75 댓글 쓰기 권한이 없는 비회원도 입력 폼은 보이게 처리
74 게시판 목록에 다운로드수, 다운로드 포인트 출력
73 댓글 목록 회원만 공개하고 비회원은 비공개, 권한별로 설정
72 비밀글 댓글 작성시 작성자 별표 처리
71 게시물 수정시 등록 날짜를 현재 시간으로 업데이트
70 글쓰기 페이지에 개인정보수집이용 동의 체크박스 추가하기
69 스크랩 버튼 비회원에게도 노출시키기 댓글1
68 댓글 목록에서 내가 작성한 글만 출력하기
67 갤러리형 게시판에서 첨부된 사진이 없을 때 no image를 이미지로 출력
66 게시판 스킨을 분류별로 각각 다르게 설정했을 때 스킨 수정 안내
65 패스워드 지정 비밀글 게시판 만들기
64 링크 입력 특정 게시판에서만 삭제하기
63 목록 페이지에 특정 이미지 원본 선택해서 출력하기
62 게시판 스킨 제작할 때 이미지 경로 설정 방법
61 모바일 내용 관리 페이지에서 상단 하단 파일을 별도로 관리하는 방법
60 비밀글 체크박스 디폴트 값을 체크 상태로 설정하기
59 게시판 설정에 있는 여분 필드 사용 예제
58 글쓰기 페이지에서 링크 입력 문구 변경하기
57 목록에서 tr 배경색 구분
게시물 검색


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

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