ys_datetime_selector.css

.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:1pxsolid#e0e0e0;text-align:center;}.ys-datetime-selector.ys-datetime-selector-content.ys-datetime-operation-barspan{color:#333;font-size:16px;}.ys-datetime-selector.ys-datetime-selector-content.ys-datetime-operation-bara{position:absolute;top:0;bottom:0;padding:015px;font-size:16px;color:#4e9dcf;}.ys-datetime-selector.ys-datetime-selector-content.ys-datetime-operation-bara.ys-datetime-cancel-btn{left:0;}.ys-datetime-selector.ys-datetime-selector-content.ys-datetime-operation-bara.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%,white40%,white60%,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(totop,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%,white40%,white60%,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;}/*==================================================pageanimationstart==================================================*/.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;}@keyframesdatetime-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-keyframesdatetime-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;}@keyframesdatetime-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-keyframesdatetime-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($){varcontainer=$(".ys-datetime-selector");varcurrentYear=newDate().getFullYear();varcurrentMonth=newDate().getMonth()+1;varcurrentDate=newDate().getDate();varcurrentDayCount=getMaxDateInMonth(currentYear,currentMonth);varyearSwiper=null;varmonthSwiper=null;vardateSwiper=null;varcallback=function(year,month,date){};varhtml="<divclass='ys-datetime-selectordisplay-hide'>"+"<divclass='ys-datetime-selector-content'>"+"<divclass='ys-datetime-operation-bar'>"+"<aclass='ys-datetime-cancel-btn'>取消</a>"+"<span>选择日期</span>"+"<aclass='ys-datetime-ok-btn'>确定</a>"+"</div>"+"<divclass='ys-datetime-blocks'>"+"<divclass='ys-datetime-year-block'>"+"<divclass='swiper-container'>"+"<divclass='swiper-wrapper'></div>"+"</div>"+"</div>"+"<divclass='ys-datetime-month-block'>"+"<divclass='swiper-container'>"+"<divclass='swiper-wrapper'></div>"+"</div>"+"</div>"+"<divclass='ys-datetime-date-block'>"+"<divclass='swiper-container'>"+"<divclass='swiper-wrapper'></div>"+"</div>"+"</div>"+"<divstyle='clear:both;'></div>"+"</div>"+"</div>"+"</div>";/*========================================initializethepageview========================================*/functionrender(){container=$(html).appendTo("body");yearSwiper=newSwiper(".ys-datetime-year-block.swiper-container",{direction:"vertical",freeMode:true,freeModeSticky:true,slidesPerView:"auto",onTransitionEnd:function(swiper){varactiveIndex=swiper.activeIndex;varslidesLen=swiper.slides.length;if(activeIndex<20){varfirstYear=parseInt($(swiper.slides[0]).attr("data-year"));varprevYears=[];for(vari=firstYear-1;i>=firstYear-100;i--){prevYears.push("<divclass='swiper-slide'data-year='"+i+"'>"+i+"年</div>");}swiper.prependSlide(prevYears);}elseif(slidesLen-activeIndex<20){varlastYear=parseInt($(swiper.slides[slidesLen-1]).attr("data-year"));varnextYears=[];for(vari=lastYear+1;i<=lastYear+100;i++){nextYears.push("<divclass='swiper-slide'data-year='"+i+"'>"+i+"年</div>");}swiper.appendSlide(nextYears);}//计算这个月有多少天currentYear=parseInt($(swiper.slides[activeIndex+2]).attr("data-year"));updateDateSwiper();}});varyearSlides=[];for(vari=currentYear-2;i<=currentYear+102;i++){yearSlides.push("<divclass='swiper-slide'data-year='"+i+"'>"+i+"年</div>");}varprevYears=[];for(vari=currentYear-3;i>currentYear-100;i--){prevYears.push("<divclass='swiper-slide'data-year='"+i+"'>"+i+"年</div>");}yearSwiper.appendSlide(yearSlides);yearSwiper.prependSlide(prevYears);monthSwiper=newSwiper(".ys-datetime-month-block.swiper-container",{direction:"vertical",freeMode:true,freeModeMomentumRatio:0.2,loop:true,loopAdditionalSlides:24,freeModeSticky:true,slidesPerView:"auto",onTransitionEnd:function(swiper){varactiveIndex=swiper.activeIndex;if(isNaN(activeIndex)){return;}//计算这个月有多少天currentMonth=parseInt($(swiper.slides[activeIndex+2]).attr("data-month"));updateDateSwiper();}});varmonthSlides=[];for(vari=1;i<=12;i++){monthSlides.push("<divclass='swiper-slide'data-month='"+i+"'>"+i+"月</div>");}monthSwiper.appendSlide(monthSlides);monthSwiper.appendSlide(monthSlides);monthSwiper.appendSlide(monthSlides);dateSwiper=newSwiper(".ys-datetime-date-block.swiper-container",{direction:"vertical",loop:true,freeMode:true,freeModeMomentumRatio:0.2,freeModeSticky:true,slidesPerView:"auto",onTransitionEnd:function(swiper){varactiveIndex=swiper.activeIndex;if(isNaN(activeIndex)){return;}//计算这个月有多少天currentDate=parseInt($(swiper.slides[activeIndex+2]).attr("data-date"));}});vardateSlides=[];for(vari=1;i<=currentDayCount;i++){dateSlides.push("<divclass='swiper-slide'data-date='"+i+"'>"+i+"日</div>");}dateSwiper.appendSlide(dateSlides);}/*========================================bindevents========================================*/functionbindEvents(){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("animationendwebkitAnimationEnd",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");});}varinitialized=false;functioninit(){if(initialized){return;}initialized=true;render();bindEvents();}/*========================================commonmethods========================================*/functiongetMaxDateInMonth(year,month){vardate=newDate();date.setFullYear(year);date.setMonth(month);date.setDate(0);returndate.getDate();}functionupdateDateSwiper(){varnextDayCount=getMaxDateInMonth(currentYear,currentMonth);if(currentDayCount>nextDayCount){for(vari=currentDayCount-1;i>=nextDayCount;i--){dateSwiper.removeSlide(i);}}elseif(currentDayCount<nextDayCount){for(vari=currentDayCount+1;i<=nextDayCount;i++){dateSwiper.appendSlide("<divclass='swiper-slide'data-date='"+i+"'>"+i+"日</div>");}}currentDayCount=nextDayCount;currentDate=parseInt($(dateSwiper.slides[dateSwiper.activeIndex+2]).attr("data-date"));}functionshowDateTime(options){options=options||{};varyear=options.year;varmonth=options.month;vardate=options.date;vartype=options.type||"year-month-date";if(type=="year-month-date"){container.find(".ys-datetime-year-block").removeClass("block-hide").removeClass("width-50").removeClass("width-100");container.find(".ys-datetime-month-block").removeClass("block-hide").removeClass("width-50").removeClass("width-100");container.find(".ys-datetime-date-block").removeClass("block-hide").removeClass("width-50").removeClass("width-100");}elseif(type=="year-month"){container.find(".ys-datetime-date-block").addClass("block-hide");container.find(".ys-datetime-year-block").addClass("width-50").removeClass("width-100").removeClass("block-hide");container.find(".ys-datetime-month-block").addClass("width-50").removeClass("width-100").removeClass("block-hide");}elseif(type=="year"){container.find(".ys-datetime-date-block").addClass("block-hide");container.find(".ys-datetime-month-block").addClass("block-hide");container.find(".ys-datetime-year-block").addClass("width-100");}callback=options.callback||callback;currentYear=year||currentYear;currentMonth=month||currentMonth;currentDate=date||currentDate;currentDayCount=getMaxDateInMonth(currentYear,currentMonth);varyearSlidesLength=yearSwiper.slides.length;varminYear=parseInt($(yearSwiper.slides[2]).attr("data-year"));varmaxYear=parseInt($(yearSwiper.slides[yearSlidesLength-3]).attr("data-year"));if(currentYear<minYear){varprevYears=[];for(vari=minYear-3;i>currentYear-20;i--){prevYears.push("<divclass='swiper-slide'data-year='"+i+"'>"+i+"年</div>");}yearSwiper.prependSlide(prevYears);yearSwiper.slideTo(17);}elseif(currentYear>maxYear){varnextSlides=[];for(vari=maxYear+2;i<=currentYear+20;i++){nextSlides.push("<divclass='swiper-slide'data-year='"+i+"'>"+i+"年</div>");}yearSwiper.appendSlide(nextSlides);yearSwiper.slideTo(currentYear-minYear+1);}else{yearSwiper.slideTo(currentYear-minYear);}monthSwiper.slideTo(currentMonth+9);dateSwiper.slideTo(currentDayCount-3+currentDate);container.removeClass("display-hide");container.find(".ys-datetime-selector-content").addClass("datetime-selector-animated").addClass("datetime-selector-slide-down-in");}varDateTimeWidget={show:function(options){init();showDateTime(options);}};window.DateTimeWidget=DateTimeWidget;})(jQuery);

datetime.html

<!DOCTYPEhtml><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"><title></title><metaname="description"content=""><metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"><metaname="format-detection"content="telephone=no"><!--导入CSS--><linkhref="dist/css/swiper.min.css"rel="stylesheet"><linkhref="css/common/ys_datetime_selector.css"rel="stylesheet"><!--导入JS--><scriptsrc="dist/js/jquery-1.11.3.min.js"></script><scriptsrc="dist/js/swiper.jquery.min.js"></script></head><body><scriptsrc="js/common/ys_datetime_selector.js"></script><script>DateTimeWidget.show({year:2018,month:12,date:31,//type:"year",callback:function(year,month,date){console.log(year+"年"+month+"月"+date+"日");}});</script></body></html>