그누보드 게시판에 DatePicker 추가
Lpla
·2021. 1. 25. 00:23
반응형
이전 포스트 : [PHP] 날짜 계산 연습 (1)
그누보드 게시판에 DatePicker (날짜 선택기) 구현하기
예시로 사용한 게시판 스킨은 basic 이다.
skin/board/basic/write_skin.php 상단에 datepicker를 불러온다.
<?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');
?>
88번째 줄 아래에 다음 코드를 추가한다 (버전에 따라 다를 수 있다.)
datepicker 를 실행하는 자바스크립트를 추가하고 html을 만들고 php로 연동하는 작업이다.
첫번째 달력은 $wr_1, 두번째 달력은 $wr_2 로 지정한다.
<div class="bo_w_tit write_div">
<label for="wr_subject" class="sound_only">제목<strong>필수</strong></label>
<script>
$(function() {
// 시작날짜와 끝나는 날짜를 함께 선택해서 사용할때
var dates = $("#datepicker_from, #datepicker_to").datepicker({
//defaultDate: "+1w", // 기본선택일이 1 week 이후가 선택되는 옵션
changeMonth: true,
dateFormat: "yy-mm-dd", // 년월일 표시방법 yy-mm-dd 또는 yymmdd
numberOfMonths: 1, // 한눈에 보이는 월달력수
onSelect: function(selectedDate) {
var option = this.id == "datepicker_from" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});
});
</script>
<div id="autosave_wrapper" class="write_div">
<div class="datepicker_box">
<span>이벤트</span>
<input type="text" name="wr_1" class="frm_input" id="datepicker_from" value="<?php echo $write["wr_1"]; ?>" readonly> ~
<input type="text" name="wr_2" class="frm_input" id="datepicker_to" value="<?php echo $write["wr_2"]; ?>" readonly>
</div>
<input type="text" name="wr_subject" value="<?php echo $subject ?>" id="wr_subject" required class="frm_input full_input required" size="50" maxlength="255" placeholder="제목">
<?php if ($is_member) { // 임시 저장된 글 기능
?>
<script src="<?php echo G5_JS_URL; ?>/autosave.js"></script>
<?php if ($editor_content_js) echo $editor_content_js; ?>
<button type="button" id="btn_autosave" class="btn_frmline">임시 저장된 글 (<span id="autosave_count"><?php echo $autosave_count; ?></span>)</button>
<div id="autosave_pop">
<strong>임시 저장된 글 목록</strong>
<ul></ul>
<div><button type="button" class="autosave_close">닫기</button></div>
</div>
<?php } ?>
</div>
</div>
중간에 onSelect: function(selectedDate) { ... } 함수는 첫번째 달력의 날짜보다 이전 날을 두번째 달력에서 선택하지 못하도록 막는 코드이다.
저장하고 글쓰기 페이지를 보면 Datepicker 가 보이고 날짜가 정상적으로 입력되는 것이 확인된다.
이제 게시글 목록 (list.skin.php) 과 본문 (view.skin.php) 에서 $wr_1 과 $wr_2 를 호출하면 된다.
list.skin.php 127번째 줄
bo_tit 클래스 마지막 줄에 기간을 추가한다.
리스트 페이지는 게시글이 여러개 있기 때문에 list의 첫번째 $wr_1 과 같은 형태로 불러와야 한다.
<div class="bo_tit">
<a href="<?php echo $list[$i]['href'] ?>">
<?php echo $list[$i]['icon_reply'] ?>
<?php
if (isset($list[$i]['icon_secret'])) echo rtrim($list[$i]['icon_secret']);
?>
<?php echo $list[$i]['subject'] ?>
</a>
<?php
if ($list[$i]['icon_new']) echo "<span class=\"new_icon\">N<span class=\"sound_only\">새글</span></span>";
// if ($list[$i]['file']['count']) { echo '<'.$list[$i]['file']['count'].'>'; }
if (isset($list[$i]['icon_hot'])) echo rtrim($list[$i]['icon_hot']);
if (isset($list[$i]['icon_file'])) echo rtrim($list[$i]['icon_file']);
if (isset($list[$i]['icon_link'])) echo rtrim($list[$i]['icon_link']);
?>
<?php if ($list[$i]['comment_cnt']) { ?><span class="sound_only">댓글</span><span class="cnt_cmt"><?php echo $list[$i]['wr_comment']; ?></span><span class="sound_only">개</span><?php } ?>
<p>기간 : <?php echo $list[$i]['wr_1'] ?> ~ <?php echo $list[$i]['wr_2'] ?></p>
</div>
view.skin.php 28번째 줄
profile_info 클래스 마지막 줄에 기간을 추가한다.
<div class="profile_info">
<div class="pf_img"><?php echo get_member_profile_img($view['mb_id']) ?></div>
<div class="profile_info_ct">
<span class="sound_only">작성자</span> <strong><?php echo $view['name'] ?><?php if ($is_ip_view) {
echo " ($ip)";
} ?></strong><br>
<span class="sound_only">댓글</span><strong><a href="#bo_vc"> <i class="fa fa-commenting-o" aria-hidden="true"></i> <?php echo number_format($view['wr_comment']) ?>건</a></strong>
<span class="sound_only">조회</span><strong><i class="fa fa-eye" aria-hidden="true"></i> <?php echo number_format($view['wr_hit']) ?>회</strong>
<strong class="if_date"><span class="sound_only">작성일</span><i class="fa fa-clock-o" aria-hidden="true"></i> <?php echo date("y-m-d H:i", strtotime($view['wr_datetime'])) ?></strong>
<p>기간 : <?php echo $view['wr_1'] ?> ~ <?php echo $view['wr_2'] ?> </p>
</div>
다음에는 게시판에서 설정한 날짜가 지나면 이벤트 종료가 표시되도록 하는 방법에 대해 알아보겠다.
참고 : www.happyjung.com/lecture/1824?sca=%EA%B7%B8%EB%88%84%EB%B3%B4%EB%93%9C&page=10
반응형
