언어/JavaScript
[datepicker]swiper 안에 datepicker
홍시_코딩기록
2023. 9. 7. 22:30
<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> <span>mm</span>월', /* 일별 달력 타이틀 */
months: '<span>yyyy</span>년', /* 월별 달력 타이틀 */
years: '<span>yyyy1</span> -</span> <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의 데이터피커를 업데이트? 하게함