본문 바로가기
내 공부..

air-datepicker(2.2.3ver) datepicker 의 년도값만 변경시, selectDate() 적용안됨 오류

by hyerin1201 2024. 2. 23.

air-datepicker 2.2.3버전을 사용중에 이슈사항이 있었음
datepicker 의 view(기본보이는화면)이 days 형식일떄 (캘랜더처럼 나올때 맞음)

해당 val 값이나, selectDate 로 해당값을 바꾸려 할때 년도값만 바뀌면 적용이 되지 않는 문제가 있었음


이게 무슨말이냐? 함은 나 경우엔

년도 ▼ (select) 월 ▼ (select) yyyy-mm-dd (datepicker) ~ yyyy-mm-dd (datepicker)

 

위와 같은 형식으로 사용하려고 했음.

yyyy-mm-dd ~ yyyy-mm-dd 는 오늘날짜 기준으로 한달 단위로 기본 세팅을 해놓고

년도와,월 선택이 그 선택한 값에 따라 datepicker에 값을 적용시켜주기로했음..

 

근데 년도만 바뀌면 datepicker에 보여지는 val 값은 적용이 되나,

datepicker 클릭시 보여지는 캘린터 부분에선 선택이 되어있지 않음을 확인함..

 

년도 - 월 모두 바꿨을땐 제대로 선택이 됨..

 

그리하여 집념의 서칭결과

해당 깃헙에서 이와 관련된 이슈사항을 확인했다. 아래 링크 확인

https://github.com/t1m0n/air-datepicker/issues/318

 

selectDate() to date in same month of another year fails to update view · Issue #318 · t1m0n/air-datepicker

Occurs when calling datePicker from external selector using selectDate() Select a date on a particular month Select the same date/month for another year The view does not change from the original m...

github.com

 

 

내용은 이러함.

해당 라이브러리 내 코드에 월(month)값은 비교해주지만 년도(year)값은 비교를 안해줌

-> 년도값도 비교할 수 있도록 코드 추가해주면 됨

위 링크에 잘 나와있음.


현재 air-datepicker 는 3.x.x 버전까지 나왔음..최신버전에서 수정이 됐는지 어쨌는지는 모르겠음..

 

그러나 이렇게하면 라이브러리 소스를 바꾸는 것임으로

다른 코드에서도 해당 라이브러리를 사용하고 있어서 문제가 될 수 있음.

따라서 야매로 적용하기로 함.

 

야매 적용방법은 년도값 변경할때 > 월값도 함께 임의로 변경 > 다시 기존 월값 적용 하는 방법임.

이렇게하면 년도,월 값 모두 변경됐음으로 datepicker 에 제대로 select 된 것을 확인 할 수 있음.

 

내가 적용한 코드는 이러함.

// 연도 또는 월 변경 시 Datepicker 날짜 업데이트
        $('#year, #month').change(function() { //년,월의 select박스
            let year = $('#year').val();
            let month = $('#month').val() - 1;
            let date = new Date(year, 0, 1); // 1월 1일
            $("#startDt").datepicker().data('datepicker').selectDate(date); //선택한년도, 1월, 1일 값 넣어줌           
            $("#startDt").datepicker().data('datepicker').selectDate(new Date(year, month, 1)); //그리고 다시 선택년도, 기존 월, 1일 값 넣어줌
        });

 

이렇게 하여 해결함