그누보드 글쓰기 화면에서 jquery datepicker 달력 사용하기

그누보드 글쓰기 화면에서 jquery calendar 입력을 사용하고자 할 경우가 있다. 

이때, 아래 코드를 글쓰기 스킨 상단에 추가해 주면 된다. 

참고로, 아래 소스는 그누보드4 의 회원가입 스킨에서 가져온 것이다. 

<?

//==============================================================================

// jquery date picker

//------------------------------------------------------------------------------

// 참고) ie 에서는 년, 월 select box 를 두번씩 클릭해야 하는 오류가 있습니다.

//------------------------------------------------------------------------------

// jquery-ui.css 의 테마를 변경해서 사용할 수 있습니다.

// base, black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, le-frog, mint-choc, overcast, pepper-grinder, redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, vader

// 아래 css 는 date picker 의 화면을 맞추는 코드입니다.

?>

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css" rel="stylesheet" />

<style type="text/css">

<!--

.ui-datepicker { font:12px dotum; }

.ui-datepicker select.ui-datepicker-month,

.ui-datepicker select.ui-datepicker-year { width: 70px;}

.ui-datepicker-trigger { margin:0 0 -5px 2px; }

-->

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>

<script type="text/javascript">

/* Korean initialisation for the jQuery calendar extension. */

/* Written by DaeKwon Kang (ncrash.dk@gmail.com). */

jQuery(function($){

$.datepicker.regional['ko'] = {

closeText: '닫기',

prevText: '이전달',

nextText: '다음달',

currentText: '오늘',

monthNames: ['1월(JAN)','2월(FEB)','3월(MAR)','4월(APR)','5월(MAY)','6월(JUN)',

'7월(JUL)','8월(AUG)','9월(SEP)','10월(OCT)','11월(NOV)','12월(DEC)'],

monthNamesShort: ['1월','2월','3월','4월','5월','6월',

'7월','8월','9월','10월','11월','12월'],

dayNames: ['일','월','화','수','목','금','토'],

dayNamesShort: ['일','월','화','수','목','금','토'],

dayNamesMin: ['일','월','화','수','목','금','토'],

weekHeader: 'Wk',

dateFormat: 'yy-mm-dd',

firstDay: 0,

isRTL: false,

showMonthAfterYear: true,

yearSuffix: ''};

$.datepicker.setDefaults($.datepicker.regional['ko']);

$('#wr_9').datepicker({

showOn: 'both',

//buttonImage: '//jqueryui.com/resources/demos/datepicker/images/calendar.gif',

//buttonImageOnly: true,

buttonText: "달력",

changeMonth: true,

changeYear: true,

showButtonPanel: true,

yearRange: 'c-99:c+99',

minDate: '+0d'

});

});

</script>

위 소스를 글쓰기 화면 상단에 추가하고,

$('#wr_9').datepicker 부분에 날짜를 입력하고자 하는 input 의 id 로 변경해 주면 된다.