어린왕자와 여우

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">

참고 : https://stackoverrun.com/ko/q/5166795