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

CDN (content delivery network) 

---

<script src="/js/jquery.mtz.monthpicker.js"></script>

---

monthpicker 설정하기

---

1. input 태그 한줄 작성

<input type="text" id="monthDate" value="">

---

2. 현재 시간 ; 2022년 8월

month 값을 통해서 아직 다가오지 않은 9, 10, 11, 12의 값을 fot문을 통해서 months 에 담아줍니다.

function loadMonthPicker() {
    var months = [];
    var dateObj = new Date();
    var selectYear = dateObj.getFullYear();
    var month = dateObj.getMonth() + 1;
    for(var i = month; j = 0; i <= 12; i++) {
        months[j++] = i;
    }

    $('#monthDate').monthpicker({
        pattern: 'yyyy-mm'       // input태그에 표시될 형식
       ,selectedYear: selectYear // 처음 클릭 시 표출되는 연도
       ,startYear: 2010          // 시작연도
       ,finalYear: selectYear    // 마지막연도
       // ,monthNames: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 
       //               'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']
       ,monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', 
                     '7월', '8월', '9월', '10월', '11월', '12월']
       ,openOnFocus: true       // focus시에 달력이 보일지 유무
       // ,disableMonths : [ ]     // 월 비활성화
    });
    
    ,,,
    
    ,,,

---

3. months에 담겨있는 9월, 10월, 11월, 12월을 비활성화 시킵니다.

/* disableMonths 설정 */
if(months.length > 0) {
    $('#monthDate').monthpicker('disableMonths', months);
}
// 연도를 변경하는 경우
 $('#monthDate').monthpicker().on('monthpicker-change-year', function(e, year) {
    if(year == selectYear.toString()) { // 같은 연도일 경우
        $('#monthDate').monthpicker('disableMonths', months);
    }else {
        $('#monthDate').monthpicker('disableMonths', []);
    }
 }

---

4. monthpicker 설정한 id값의 input 태그의 값을 클릭하면, 달력을 보여줍니다.

    /* 버튼 클릭 시 show */
    $('#btn_monthPicker').bind('click', function () {
        $('#monthDate').monthpicker('show');
    });

---

5. 달력의 월을 클릭하면, dateSetting() 함수를 불러옵니다.

* bind() : jQuery 이벤트를 다른 함수로 연결(bind)해주는 함수

     /* 월 선택 시 */
     $('#monthDate').monthpicker().bind('monthpicker-click-month', function() {
        dateSetting(); // 월을 선택한 후에 설정하기 위해
     });
     dateSetting(); // 월을 선택하기 이전에 설정하기 위해

---

6. dateSetting() 함수는 달력에서 선택한 값을 가져와서 dateObj에 넣고, 연도와 달을 아래와 같이 처리하여 input 태그의 value값에 넣어줍니다.

    function dateSetting() {
        var dateObj = $('#monthDate').monthpicker('getDate');

        if(dateObj == null) {
            dateObj = new Date();
        }
        var year = dateObj.getFullYear();
        year = "" + year;
        var month = dateObj.getMonth() + 1;

        if(month < 10) {
            year += "-0" + month;
        }else {
            year += "-" + month;
        }
        $('#monthDate').val(year);
    }

});

 

* 전체 코드 

function loadMonthPicker() {
    var months = [];
    var dateObj = new Date();
    var selectYear = dateObj.getFullYear();
    var month = dateObj.getMonth() + 1;
    for(var i = month; j = 0; i <= 12; i++) {
        months[j++] = i;
    }

    $('#monthDate').monthpicker({
        pattern: 'yyyy-mm'       // input태그에 표시될 형식
       ,selectedYear: selectYear // 처음 클릭 시 표출되는 연도
       ,startYear: 2010          // 시작연도
       ,finalYear: selectYear    // 마지막연도
       // ,monthNames: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 
       //               'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']
       ,monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', 
                     '7월', '8월', '9월', '10월', '11월', '12월']
       ,openOnFocus: true       // focus시에 달력이 보일지 유무
       // ,disableMonths : [ ]     // 월 비활성화
    });
	
    /* disableMonths 설정 */
    if(months.length > 0) {
        $('#monthDate').monthpicker('disableMonths', months);
    }
	
    // 연도를 변경하는 경우
    $('#monthDate').monthpicker().on('monthpicker-change-year', function(e, year) {
       if(year == selectYear.toString()) { // 같은 연도일 경우
           $('#monthDate').monthpicker('disableMonths', months);
       }else {
           $('#monthDate').monthpicker('disableMonths', []);
       }
    }
	 
    // 버튼 클릭 시 show
    $('#btn_monthPicker').bind('click', function () {
        $('#monthDate').monthpicker('show');
    });
	
    // 월 선택 시
    $('#monthDate').monthpicker().bind('monthpicker-click-month', function() {
       dateSetting(); // 월을 선택한 후에 설정하기 위해
    });
    dateSetting(); // 월을 선택하기 이전에 설정하기 위해
}

function dateSetting() {
    var dateObj = $('#monthDate').monthpicker('getDate');

    if(dateObj == null) {
        dateObj = new Date();
    }
    var year = dateObj.getFullYear();
    year = "" + year;
    var month = dateObj.getMonth() + 1;

    if(month < 10) {
        year += "-0" + month;
    }else {
        year += "-" + month;
    }
    $('#monthDate').val(year);
}

---

출처 : https://sol-study.tistory.com/7 

출처 : https://pej4303.tistory.com/30

출처 : https://aspdotnet.tistory.com/2592