[그누보드] Input 간략한 date-picker

<style>
/* jquery datepicker 용 간단 CSS */
/* 출처 : https://sir.kr/g5_tip/16589 */

#ui-datepicker-div { background: #fff; margin: 5px 0 0 0; padding-top: 25px; box-shadow: 10px 10px 40px rgb(0 0 0 / 10%); }
#ui-datepicker-div .ui-datepicker-header { position: relative; margin-left: 20px; margin-right: 20px; }
#ui-datepicker-div .ui-datepicker-prev { position: absolute; display: inline-block; font-size: 12px; top: -23px; left: 0; }
#ui-datepicker-div .ui-datepicker-next { position: absolute; display: inline-block; font-size: 12px; top: -23px; right: 0; }
#ui-datepicker-div .ui-datepicker-title { position: relative; clear: both; margin-top: 10px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
#ui-datepicker-div .ui-datepicker-title select { height: auto; width: calc( 50% - 15px); min-width: 90px; padding: 4px 12px; border-radius: 0; }
#ui-datepicker-div .ui-datepicker-calendar { margin-left: 20px; margin-right: 20px; }
#ui-datepicker-div .ui-datepicker-calendar th,
#ui-datepicker-div .ui-datepicker-calendar td { width: 35px; height: 30px; text-align: center; line-height: 30px; }
#ui-datepicker-div .ui-datepicker-calendar th:first-child > span,
#ui-datepicker-div .ui-datepicker-calendar td:first-child > a { color: #dc3545; }
#ui-datepicker-div .ui-datepicker-calendar th:last-child > span,
#ui-datepicker-div .ui-datepicker-calendar td:last-child > a { color: #007bff; }
#ui-datepicker-div .ui-datepicker-calendar .ui-state-active { padding: 3px 6px; background: #6f42c1; color: #fff; font-weight: 600; }
#ui-datepicker-div .ui-datepicker-buttonpane { margin-top: 10px; display: flex; }
#ui-datepicker-div .ui-datepicker-buttonpane > button { flex: 1 1 50%; max-width: 50%; text-align: center; padding: .375rem; }
#ui-datepicker-div .ui-datepicker-buttonpane > button:first-child { order: 2; background: #dc3545; color: #fff; }
#ui-datepicker-div .ui-datepicker-buttonpane > button:last-child  { order: 1; }
 
</style>

그누보드는 기본적으로 Datepicker 플러그인을 포함하고 있다(최신버전기준)

 

 

게시판 스킨 작성 파일에(write파일) 

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

include_once(G5_PLUGIN_PATH.'/jquery-ui/datepicker.php'); // 플러그인 인클루드

...

...

...

<input class="datepicker frm_input" >

상단에 인클루드 해주고, 클래스 datepicker 추가해준다.

 

그리고 최하단에 스크립트 삽입하기

<!-- 달력 시작-->
<script type="text/javascript">
//<![CDATA[
$(function(){
    $(".datepicker").datepicker({
        dateFormat: "yy-mm-dd",
        onSelect:function(dateText, inst) {
            console.log(dateText);
            console.log(inst);
        }
    });
    $(".targetFocus").click(function(){
        $($(this).data("target")).focus();
    });
});
//]]>
</script><!-- 달력 끝 -->

 

날짜 포맷 방식 : dateFormat: "yy-mm-dd"

yy-mm-dd : 2015-10-25

yy/mm/dd : 2015/10/25

yy.mm.dd : 2015.10.25

yymmdd : 20151025