monthpicker 이용 시 미래의 월(month) 비활성화하기 -- JQuery




monthpicker를 이용하여 YYYY-MM 형태의 날짜를 선택하는 코드를 만들었다.
그런데 선택 시 아직 다가오지 않은 달은 선택하지 않도록 하는 이슈가 있어 아래와 같이 반영하였다.


<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="/js/jquery-ui-1.12.1.min.js" type="text/javascript"></script>
<script src="/js/jquery.mtz.monthpicker.js" type="text/javascript"></script>

<script>

<?php 
date_default_timezone_set('Asia/Seoul');
$date = date('Y-m-d');
$today = date_create($date);
?>

$(document).ready(function() {
    // monthpicker 적용
    $('.month-picker').monthpicker({
        language: "ko",
        pattern: "yyyy-mm",
        selectedYear: "<?=date_format($today, 'Y')?>",
        startYear: "<?=(int)date_format($today, 'Y')-20?>",
        finalYear: "<?=(int)date_format($today, 'Y')?>",
        monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
        openOnFocus: true,
    });

    var months = [];
    // 올해 아직 지나지 않은 월들을 배열에 저장
    for (var i = <?=date('n')?>+1, j = 0; i <= 12; i++) {
            months[j++] = i;
    }
    for(var i = 0; i < $('.month-picker').length; i++) {
       // 올해이면 위의 months들은 비활성화하고, 
       // 이전해들이면 모든 월들을 활성화시킴
        $($('.month-picker')[i]).monthpicker("disableMonths", months);
        $($('.month-picker')[i]).monthpicker().bind('monthpicker-change-year', function(e, year) {
            var item = $(e.currentTarget);
            if(year === '<?=date("Y")?>') {
                $(item).monthpicker('disableMonths', months);
            }
            else {
                $(item).monthpicker('disableMonths', []);
            }
        }); 
    }
});
</script>

<input type="text" class="month-picker">


덧글

댓글 입력 영역