그누보드 - datepicker사용시 input설정만으로 간단하게 날짜 사용하기

datepicker사용시 input설정만으로 간단하게 날짜 사용하기 > 그누보드5 팁자료실

그누보드5 팁자료실

datepicker사용시 input설정만으로 간단하게 날짜 사용하기 정보

datepicker사용시 input설정만으로 간단하게 날짜 사용하기

본문

많은 분들이 이미 알고있는 팁일수있지만 제가 자주쓰는 방법이라 몇자 적어봅니다.

그누보드 날짜 플러그인 datepicker를 사용시 스크립트를 추가해줘야 하는데

input 설정만으로 간단하게 사용할 수 있는 팁입니다.

첫번째 /plugin/jquery-ui/datepicker.php 파일에 아래와 같이 코드를 추가해줍니다.


    var _container_1 = jQuery('.datepicker');
    if(_container_1.length > 0) {
        if(jQuery().datepicker) {
            _container_1.each(function() {
                var _t = jQuery(this);
                jQuery(this).datepicker({
                    dateFormat:            _t.attr('data-format')            || 'yy-mm-dd',
                    changeMonth:         _t.attr('data-changeMonth')        == "false" ? false : true,
                    changeYear:         _t.attr('data-changeYear')        == "false" ? false : true,
                    showButtonPanel:    _t.attr('data-showButtonPanel') == "false" ? false : true,
                    yearRange:            _t.attr('data-yearRange')        || 'c-99:c+99',
                    defaultDate:        _t.attr('data-defaultDate'),
                    minDate:            _t.attr('data-minDate'),
                    maxDate:            _t.attr('data-maxDate')
                });
            });
        }
    }

사용방법은 아래와 같이 class에 datepicker를 추가해주신후 스크립트 추가 없이 input 설정만으로 간단하게 사용하시면 됩니다.
예를 들어 minDate와 maxDate를 사용하실려면 data-minDate="-10d" data-maxDate="+10d"와 같이 추가해주시면 됩니다.
추가적인 옵션이 필요하면 datepicker.php에서 정의해주면 됩니다.


<?php include_once(G5_PLUGIN_PATH.'/jquery-ui/datepicker.php'); ?>
<li>
    <label for="reg_mb_homepage">생년월일</label>
    <input type="text" name="mb_birth" value="<?php echo get_text($member['mb_birth']) ?>" id="reg_mb_birth" class="frm_input full_input datepicker" size="70" maxlength="255" placeholder="생년월일" data-format="yy-mm-dd" data-changeMonth="true" data-showButtonPanel="true" data-yearRange="c-99:c+99" data-maxDate="+0d">
</li>