[datepicker]swiper 안에 datepicker(주간 선택)

사람 돌게 만드는 datepicker

!오류 해결 못했습니다..

 

스와이퍼 안에서 실행되는 datepicker 왼쪽 사진 처럼 슬라이드 안에서도 주간 선택이 잘 실행된다.

하지만 이번 달에서는 주간 선택이 실행되지 않음... ㅎ?

안될거면 다 안되던가 이건 무슨 오류일까,,

근데 웃긴건 마지막 슬라이드에서는 또 주간 선택이 잘 됨...^^

 

미쳐버리는 datepicker입니다,,

https://codepen.io/hhsshsii-ii/pen/xxmgbVa

 

* 혹시 사용하실 분 계시면 air-datepicker 를 사용중이고 moment.js가 필요합니다!

 

<div class="swiper-container">
                <ul class="swiper-wrapper">
                    <li class="swiper-slide">
                        <input type="text" class="date_week" readonly>
                        <span class="export_week"></span>
                    </li>
                    <li class="swiper-slide">
                        <input type="text" class="date_week" readonly>
                        <span class="export_week"></span>
                    </li>
                    <li class="swiper-slide">
                        <input type="text" class="date_week" readonly>
                        <span class="export_week"></span>
                    </li>
                </ul>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>

$('.date_week').datepicker({
                language: 'ko',
                autoClose: true,
                navTitles:{
                        days: '<span>yyyy</span>년</span>&nbsp;<span>mm</span>월', /* 일별 달력 타이틀 */
                        months: '<span>yyyy</span>년', /* 월별 달력 타이틀 */
                        years: '<span>yyyy1</span>&nbsp;-</span>&nbsp;<span>yyyy2</span>' /* 년별 달력 타이틀 */
                    }
            })
            const learnWeek = new Swiper('.swiper-container',{
                slidesPerView: 1, 
                spaceBetween: 0,
                allowTouchMove:false,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                on: {
                    init: function () {
                        selectWeek(this.activeIndex);
                    },
                    slideChange: function () {
                        selectWeek(this.activeIndex);
                    },
                },
            }); 
            function selectWeek(activeIndex) {
                var $dateWeek = $('.swiper-slide:eq(' + activeIndex + ') .date_week');
                var $exportWeek = $('.swiper-slide:eq(' + activeIndex + ') .export_week');

                // datepicker 설정
                var config = {
                    week: {
                        onSelect: function (formattedDate, date, inst) {
                            var dateRangeText = getWeekByDateStr(formattedDate).join(" ~ ");
                            var combinedText = dateRangeText;
                            $exportWeek.html(combinedText);
                        }
                    },
                };

                // datepicker 초기화 및 오늘 날짜 설정
                $dateWeek.datepicker(config.week);
                $dateWeek.data('datepicker').selectDate(new Date());

            }
            var cellCount=0, weekList=[];
            var row = createRowSelector();
            
            /* 일주일 선택 이벤트 */
            weekSelector();
            function weekSelector () {
                $(".datepicker").mouseover(function(e){
                    if (typeof e.target.className!="string") return;
                    if (e.target.className.indexOf("datepicker--cell-day")==-1) return;
                    
                    var m = getSundayByDateStr(getDateStrByCell($(e.target)));
                    var currentRow = getCellByDateStr(m.format("YYYY-MM-DD"));
                    currentRow.appendChild(row);
                });
            }
            
            /* 일주일 선택 이벤트 */
            function createRowSelector () {
                var r = document.createElement("div");
                    r.setAttribute("class", "row");
                return r;
            }
            /* 해당 주의 일요일 계산 */
            function getSundayByDateStr (dateStr) {
                var sunday;
                var year = dateStr.split("-")[0];
                var month = dateStr.split("-")[1];
                var date = dateStr.split("-")[2];
                var day = new Date(year, month-1, date).getDay();
                var currentDate = moment([year, month, date].join("-"));
                
                if (day >= 0) {
                    sunday = currentDate.clone().subtract(day, 'days');
                }
                
                return sunday;
            }
            /* 문자열 생성 yyyy-mm-dd */
            function getDateStrByCell (cell) {
                var year = parseInt(cell.attr("data-year"));
                var month = parseInt(cell.attr("data-month"));
                var date = parseInt(cell.attr("data-date"));
                
                return [year, month+1, date].join("-");
            }
            
            /* 문자열 반환 */
            function getCellByDateStr (dateStr) {
                var cell;
                var yyyy = parseInt(dateStr.split("-")[0]);
                var mm = parseInt(dateStr.split("-")[1]);
                var dd = parseInt(dateStr.split("-")[2]);
                
                $.each($(".datepicker--cell-day"), function (i, k) {
                    if( k.dataset.year==yyyy && k.dataset.month==mm-1 && k.dataset.date==dd ) {
                    cell = k;
                    return true;
                    }
                });
                
                return cell;
            }
            /* 일 ~ 토 반환 */
            function getWeekByDateStr (dateStr) {
                var week=[];
                var m = getSundayByDateStr(dateStr);
                
                    var sunday = m.format("YYYY.MM.DD");
                    var Saturday = m.clone().add(6, "days").format("YYYY.MM.DD");
                    
                    week.push(sunday);
                    week.push(Saturday);
                
                weekList = week;
                return week;
            }

weekselector()에 console.log를 넣어서 확인해보니 주간 선택 객체가 생성되지 않을 때에도  weekselector는 잘 작동함. 

무슨 문제인지 모르겠음...

 

아시는 분 있으면 알려주시길 부탁드립니다...