重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
ys_datetime_selector.css
成都创新互联长期为上千余家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为承德企业提供专业的成都网站制作、成都网站设计、外贸营销网站建设,承德网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。
.ys-datetime-selector{ position:fixed; left:0; right:0; top:0; bottom:0; background-color:rgba(0,0,0,0.3); z-index: 999; } .ys-datetime-selector.display-hide{ transform: translate3d(100%,0,0); -webkit-transform: translate3d(100%,0,0); visibility: hidden; } .ys-datetime-selector .ys-datetime-selector-content{ position:absolute; left:0; right:0; bottom:0; background-color:#fff; } /* ======================================== ys-datetime-operation-bar ======================================== */ .ys-datetime-selector .ys-datetime-selector-content .ys-datetime-operation-bar{ height:45px; line-height: 44px; border-bottom:1px solid #e0e0e0; text-align: center; } .ys-datetime-selector .ys-datetime-selector-content .ys-datetime-operation-bar span{ color:#333; font-size:16px; } .ys-datetime-selector .ys-datetime-selector-content .ys-datetime-operation-bar a{ position:absolute; top:0; bottom:0; padding:0 15px; font-size:16px; color:#4e9dcf; } .ys-datetime-selector .ys-datetime-selector-content .ys-datetime-operation-bar a.ys-datetime-cancel-btn{left:0;} .ys-datetime-selector .ys-datetime-selector-content .ys-datetime-operation-bar a.ys-datetime-ok-btn{right:0;} /* ======================================== ys-datetime-blocks ======================================== */ .ys-datetime-selector .ys-datetime-selector-content .ys-datetime-blocks{ position:relative; height:170px; -webkit-mask-box-p_w_picpath: -webkit-linear-gradient(top, rgba(0,0,0,0.2), rgba(0,0,0,0.4) 20%,rgba(0,0,0,0.6) 39%,white 40%, white 60%,rgba(0,0,0,0.6) 41%, rgba(0,0,0,0.4) 80%,rgba(0,0,0,0.2)); -webkit-mask-box-p_w_picpath: linear-gradient(to top, rgba(0,0,0,0.2), rgba(0,0,0,0.2), rgba(0,0,0,0.4) 20%,rgba(0,0,0,0.6) 39%,white 40%, white 60%,rgba(0,0,0,0.6) 41%, rgba(0,0,0,0.4) 80%,rgba(0,0,0,0.2)); } .ys-datetime-selector .ys-datetime-selector-content .ys-datetime-blocks:before{ content:""; position:absolute; left:0; right:0; height:1px; background-color:#cdcdcd; top:68px; } .ys-datetime-selector .ys-datetime-selector-content .ys-datetime-blocks:after{ content:""; position:absolute; left:0; right:0; height:1px; background-color:#cdcdcd; bottom:68px; } .ys-datetime-selector .ys-datetime-selector-content .ys-datetime-blocks>div{ width:33.333%; float:left; } .ys-datetime-selector .ys-datetime-selector-content .ys-datetime-blocks>div.block-hide{ display:none; } .ys-datetime-selector .ys-datetime-selector-content .ys-datetime-blocks>div.width-50{ width:50%; } .ys-datetime-selector .ys-datetime-selector-content .ys-datetime-blocks>div.width-100{ width:100%; } .ys-datetime-selector .ys-datetime-selector-content .ys-datetime-blocks .swiper-container{ height:170px; } .ys-datetime-selector .ys-datetime-selector-content .ys-datetime-blocks .swiper-container .swiper-slide{ height:34px; line-height: 34px; text-align: center; } /* ================================================== page animation start ================================================== */ .ys-datetime-selector .datetime-selector-animated{ animation-duration: 0.3s; -webkit-animation-duration: 0.3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } /* datetime-selector-slide-down-in */ .ys-datetime-selector .datetime-selector-slide-down-in{ animation-name:datetime-selector-slide-down-in; -webkit-animation-name:datetime-selector-slide-down-in; } @keyframes datetime-selector-slide-down-in { from{ -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to{ -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes datetime-selector-slide-down-in { from{ -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to{ -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } /* datetime-selector-slide-down-out */ .datetime-selector-slide-down-out{ animation-name:datetime-selector-slide-down-out; -webkit-animation-name:datetime-selector-slide-down-out; } @keyframes datetime-selector-slide-down-out { from{ -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to{ -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @-webkit-keyframes datetime-selector-slide-down-out { from{ -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to{ -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } }
ys_datetime_selector.js
(function($){ var container = $(".ys-datetime-selector"); var currentYear = new Date().getFullYear(); var currentMonth = new Date().getMonth()+1; var currentDate = new Date().getDate(); var currentDayCount = getMaxDateInMonth(currentYear,currentMonth); var yearSwiper =null; var monthSwiper =null; var dateSwiper =null; var callback = function(year,month,date){}; var html = ""+ " "+ ""; /* ======================================== initialize the page view ======================================== */ function render(){ container = $(html).appendTo("body"); yearSwiper = new Swiper(".ys-datetime-year-block .swiper-container", { direction : "vertical", freeMode:true, freeModeSticky:true, slidesPerView: "auto", onTransitionEnd:function(swiper){ var activeIndex = swiper.activeIndex; var slidesLen = swiper.slides.length; if(activeIndex<20){ var firstYear = parseInt($(swiper.slides[0]).attr("data-year")); var prevYears = []; for(var i=firstYear-1;i>=firstYear-100;i--){ prevYears.push(""+i+"年"); } swiper.prependSlide(prevYears); }else if(slidesLen-activeIndex<20){ var lastYear = parseInt($(swiper.slides[slidesLen-1]).attr("data-year")); var nextYears = []; for(var i=lastYear+1;i<=lastYear+100;i++){ nextYears.push(""+i+"年"); } swiper.appendSlide(nextYears); } // 计算这个月有多少天 currentYear = parseInt($(swiper.slides[activeIndex+2]).attr("data-year")); updateDateSwiper(); } }); var yearSlides = []; for(var i=currentYear-2;i<=currentYear+102;i++){ yearSlides.push(""+i+"年"); } var prevYears = []; for(var i=currentYear-3;i>currentYear-100;i--){ prevYears.push(""+i+"年"); } yearSwiper.appendSlide(yearSlides); yearSwiper.prependSlide(prevYears); monthSwiper = new Swiper(".ys-datetime-month-block .swiper-container", { direction :"vertical", freeMode:true, freeModeMomentumRatio:0.2, loop:true, loopAdditionalSlides:24, freeModeSticky:true, slidesPerView:"auto", onTransitionEnd:function(swiper){ var activeIndex = swiper.activeIndex; if(isNaN(activeIndex)){ return; } // 计算这个月有多少天 currentMonth = parseInt($(swiper.slides[activeIndex+2]).attr("data-month")); updateDateSwiper(); } }); var monthSlides=[]; for(var i=1;i<=12;i++){ monthSlides.push(""+i+"月"); } monthSwiper.appendSlide(monthSlides); monthSwiper.appendSlide(monthSlides); monthSwiper.appendSlide(monthSlides); dateSwiper = new Swiper(".ys-datetime-date-block .swiper-container", { direction :"vertical", loop : true, freeMode:true, freeModeMomentumRatio:0.2, freeModeSticky:true, slidesPerView:"auto", onTransitionEnd:function(swiper){ var activeIndex = swiper.activeIndex; if(isNaN(activeIndex)){ return; } // 计算这个月有多少天 currentDate = parseInt($(swiper.slides[activeIndex+2]).attr("data-date")); } }); var dateSlides=[]; for(var i=1;i<=currentDayCount;i++){ dateSlides.push(""+i+"日"); } dateSwiper.appendSlide(dateSlides); } /* ======================================== bind events ======================================== */ function bindEvents(){ container.on("click",function(e){ e.stopPropagation(); e.preventDefault(); container.find(".ys-datetime-selector-content").addClass("datetime-selector-slide-down-out"); }); container.on("click",".ys-datetime-selector-content",function(e){ e.stopPropagation(); e.preventDefault(); }); container.on("click",function(e){e.preventDefault();e.stopPropagation();}); container.on("click",".ys-datetime-cancel-btn",function(e){ e.stopPropagation(); e.preventDefault(); container.find(".ys-datetime-selector-content").addClass("datetime-selector-slide-down-out"); }); container.on("click",".ys-datetime-ok-btn",function(e){ e.stopPropagation(); e.preventDefault(); callback(currentYear,currentMonth,currentDate); container.find(".ys-datetime-selector-content").addClass("datetime-selector-slide-down-out"); }); container.find(".ys-datetime-selector-content").on("animationend webkitAnimationEnd",function(){ if($(this).hasClass("datetime-selector-slide-down-out")){ container.addClass("display-hide"); } $(this).removeClass("datetime-selector-slide-down-in").removeClass("datetime-selector-slide-down-out"); }); } var initialized = false; function init(){ if(initialized){ return; } initialized = true; render(); bindEvents(); } /* ======================================== common methods ======================================== */ function getMaxDateInMonth(year,month){ var date = new Date(); date.setFullYear(year); date.setMonth(month); date.setDate(0); return date.getDate(); } function updateDateSwiper(){ var nextDayCount = getMaxDateInMonth(currentYear,currentMonth); if(currentDayCount>nextDayCount){ for(var i=currentDayCount-1;i>=nextDayCount;i--){ dateSwiper.removeSlide(i); } }else if(currentDayCount"+i+"日
datetime.html