[JS] monthpicker 사용

참고 링크 : https://take-it-into-account.tistory.com/198

[js] monthpicker 기본 설정, 월 비활성화하는 방법

 

month picker github 주소

https://github.com/lucianocosta/jquery.mtz.monthpicker

GitHub - lucianocosta/jquery.mtz.monthpicker: Monthpicker, the missing JQuery widget.

소스 다운로드 후 프로젝트에 추가 후 링크

 

1. 달력이 들어갈 input box 생성

 <input type="text" name="searchDate" id="monthpicker">

2. 현재 달 2023년 9월 

내가 원하는 형태는 10, 11, 12 월 안 나오게 출력

$(function () {
        var months = [];
        var dateObj = new Date();
        var selectYear = dateObj.getFullYear();
        var disableYear = dateObj.getFullYear();
        var month = dateObj.getMonth() + 1;
        var j = 0 ;
        // 해당하지 않는 월 disable
        for ( var i = month + 1 ; i <=12; i ++){
            months[j++] = i;
        }

        /* MonthPicker 옵션 */
        options = {
            pattern: 'yyyy-mm', // Default is 'mm/yyyy' and separator char is not mandatory
            selectedYear: selectYear,
            startYear: 2023,
            finalYear: disableYear,
            monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
            openOnFocus : true
        };

        /* MonthPicker Set */
        $('#monthpicker').monthpicker(options);
        if ( disableYear == selectYear ) {
            $("#monthpicker").monthpicker('disableMonths', months);
        }
        // 년도 바꿀 경우 월 able
        $('#monthpicker').monthpicker().on('monthpicker-change-year', function(e,year){
            if ( year == selectYear.toString() ) {
                $('#monthpicker').monthpicker('disableMonths', months);
            } else {
                $('#monthpicker').monthpicker('disableMonths', []);
            }
        })
    });

 

3. 결과화면