언어/JavaScript

[datepicker]swiper 안에 datepicker

홍시_코딩기록 2023. 9. 7. 22:30

스와이퍼 안에 datepicker 넣기

<div class="swiper-container">
                <ul class="swiper-wrapper">
                    <li class="swiper-slide">
                        <input type="text" class="date_week" readonly>
                    </li>
                    <li class="swiper-slide">
                        <input type="text" class="date_week" readonly>
                    </li>
                    <li class="swiper-slide">
                        <input type="text" class="date_week" readonly>
                    </li>
                </ul>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
$('.date_week').datepicker({
                language: 'ko',
                autoClose: true,
                startDate:new Date(),
                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 swiperDate = new Swiper('.swiper-container',{
                slidesPerView: 1, 
                spaceBetween: 0,
                allowTouchMove:false,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                on: {
                    init: startToday,
                    slideChange: startToday
                }
            }); 

            function startToday() {
                const $currentSlide = $('.swiper-slide:eq(' + this.activeIndex + ') .date_week');
                $currentSlide.datepicker().data('datepicker').selectDate(new Date());
            }

스와이퍼 안에 datepicker 넣기 간단!

datepicker를 그냥 넣어버리면 슬라이드 될 대마다 적용이 되지 않기때문에 스와이퍼 옵션으로 activeindex의 데이터피커를 업데이트? 하게함