[javaScript] monthpicker jquery에서 입력받은 날짜로 '년/월' 변경하기

https://take-it-into-account.tistory.com/198

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

이번글은 위의 글과 같이 monthpicker를 생성한 이후 단계입니다.

---

 

1. 위에 파란색으로 active되어 있는 부분을 초기화시킨다.

---

// monthpicker 초기화
$('.ui-state-default.mtz-monthpicker.mtz-monthpicker-month.ui-state-active').attr('class', 'ui-state-default mtz-monthpicker mtz-monthpicker-month');

* 초기화되는 모습

 

2. 입력받은 날짜를 해당 년/월 값으로 넣어준다. 

---

$('#monthpicker').val(inputted_date); // "2023-07"

* 입력받은 날짜 (inputted_date)

 

3. year(입력받은 년도)와 selectedYear(원래 선택이 되어 있었던 년도)가 다른 경우 : year는 active시키고, selectedYear는 초기화시킨다.

---

* selectedYear

// 현재 년도
var nowYear = new Date().addMonths(0).format("yyyy"); // "2023"

// 입력받은 년도
var year = new Date(inputted_date).addMonths(0).format("yyyy"); // "2023"

// 선택된 년도
var selectedYear = $('.mtz-monthpicker.mtz-monthpicker-year option:selected').val(); // "2023"

if(year != selectedYear) {
    $('.mtz-monthpicker.mtz-monthpicker-year option[value='+ year +']').attr('selected', true);
    $('.mtz-monthpicker.mtz-monthpicker-year option[value='+ selectedYear +']').attr('selected', false);
}

 

4. 입력받은 월을 active시킨다.

---

// monthpicker-month
var inputted_month = new Date(inputted_date).addMonths(0).format("MM"); // "07"
var month = 0; 
if(inputted_month < 10) { // 07 < 10 (true)
    month = inputted_month.substring(1,2); // "7"
}else {
    month = inputted_month;
}

// 1월, 2월, 3월인 경우
if(month <= 3) {
    $('tbody.mtz-monthpicker').find('tr:first').find('td:eq('+(month-1)+')').addClass('ui-state-active');
// 나머지 
}else {
    $('.mtz-monthpicker').find('td:eq('+(month-1)+')').addClass('ui-state-active');
}