<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의 데이터피커를 업데이트? 하게함
'언어 > JavaScript' 카테고리의 다른 글
[udemy] 유데미 javascript 강의 후기 (1) | 2023.09.07 |
---|---|
[datepicker]swiper 안에 datepicker(주간 선택) (0) | 2023.09.07 |
[airdatepicker]데이트피커 주간으로 선택하기 (0) | 2023.08.24 |
[javascript] 프로그레스 바 색상 나눠서 채우기 (0) | 2023.07.21 |
[javascript30] 13 - Slide in on Scroll (0) | 2023.06.22 |