jquery 달력을 이용한 시작~종류 시점적용하기 (회원가입스킨응용) > 그누4 팁자료실

그누4 팁자료실

그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.

jquery 달력을 이용한 시작~종류 시점적용하기 (회원가입스킨응용) 정보

jquery 달력을 이용한 시작~종류 시점적용하기 (회원가입스킨응용)

본문

직접입력해도 되지만, 기간을 달력으로 표기하는데 jquery 달력을 이용하는 경우가 있습니다.
시작~종류 시점설정을 회원가입스킨응용하여 적용해본 예입니다.  궁금해 하시는 분들도 있고
저또한 그래서 작은 팁으로 소개합니다.


jquery 규정하기
보통게시판 스킨내 write.skin.php내에 상단부분에 아래 부분을 삽입합니다.  시작시점은 지금~100일 후까지로 되어있습니다.



<!--교육기간 입력문제해결위한 jquery -->
<?
//==============================================================================
// 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 (*** 개인정보보호를 위한 이메일주소 노출방지 ***). */
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: 'yymmdd',
firstDay: 0,
isRTL: false,
showMonthAfterYear: true,
yearSuffix: ''};
$.datepicker.setDefaults($.datepicker.regional['ko']);

    $('#start_day').datepicker({
        showOn: 'button',
buttonImage: '<?=$g4[path]?>/img/calendar.gif',
buttonImageOnly: true,
        buttonText: "달력",
        changeMonth: true,
changeYear: true,
        showButtonPanel: true,
        yearRange: 'c-99:c+99',
        minDate: '-0d'
    });

    $('#end_day').datepicker({
        showOn: 'button',
buttonImage: '<?=$g4[path]?>/img/calendar.gif',
buttonImageOnly: true,
        buttonText: "달력",
        changeMonth: true,
changeYear: true,
        showButtonPanel: true,
        yearRange: 'c-99:c+99',
        maxDate: '+100d'
    });

});
</script>
<?
//==============================================================================
?>
<!--교육기간 입력문제해결위한 jquery // -->



■■  입력부분에 삽입하기

직접적으로 표현하는 곳에 아래부분을 삽입해 줍니다. 각 스킨마다 name들은 다르겠지만, id의
start_day, end_day가 jquery 가 적용된 것입니다.


        <!-- 교육기간 회원가입스킨 응용입력/ 자바스크립트오류해결 20121006 -->
        <? if ($w=="") { ?>
      <input class=ed type=text id=start_day name='wr1_3' size=8 maxlength=8 minlength=8 required numeric itemname='교육시작일' value='<?=$wr1[3]?>' readonly title='옆의 달력 아이콘을 클릭하여 날짜를 입력하세요.'>
        <? } ?>
        ~
        <? if ($w=="") { ?>
      <input class=ed type=text id=end_day name='wr1_4' size=12 maxlength=8 minlength=8 required numeric itemname='교육종료일' value='<?=$wr1[4]?>' readonly title='옆의 달력 아이콘을 클릭하여 날짜를 입력하세요.'>
        <? } ?>
        <!-- 교육기간 회원가입스킨 응용입력/ 자바스크립트오류해결 20121006 //-->



■■■  일부오류와 과제

- 회원가입 기본스킨처럼 년월일 부분의 점(.)이 표기되지 않는 점.
- 관리자가 최초 게시한 내용 수정시 빈 공백으로 표기되는 점.
추천
1

댓글 2개

전체 103 |RSS
그누4 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT