站长资讯网HTML5自定义日历控件的示例代码详解
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: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-image: -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-image: 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 = "<div class='ys-datetime-selector display-hide'> "+ " <div class='ys-datetime-selector-content'> "+ " <div class='ys-datetime-operation-bar'> "+ " <a class='ys-datetime-cancel-btn'>取消</a>"+ " <span>选择日期</span> "+ " <a class='ys-datetime-ok-btn'>确定</a> "+ " </div> "+ " <div class='ys-datetime-blocks'> "+ " <div class='ys-datetime-year-block'> "+ " <div class='swiper-container'> "+ " <div class='swiper-wrapper'></div>"+ " </div> "+ " </div> "+ " <div class='ys-datetime-month-block'> "+ " <div class='swiper-container'> "+ " <div class='swiper-wrapper'></div>"+ " </div> "+ " </div> "+ " <div class='ys-datetime-date-block'> "+ " <div class='swiper-container'> "+ " <div class='swiper-wrapper'></div>"+ " </div> "+ " </div> "+ " <div style='clear:both;'></div> "+ " </div> "+ " </div> "+ "</div> "; /* ======================================== 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("<div class='swiper-slide' data-year='"+i+"'>"+i+"年</div>"); } 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("<div class='swiper-slide' data-year='"+i+"'>"+i+"年</div>"); } 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("<div class='swiper-slide' data-year='"+i+"'>"+i+"年</div>"); } var prevYears = []; for(var i=currentYear-3;i>currentYear-100;i--){ prevYears.push("<div class='swiper-slide' data-year='"+i+"'>"+i+"年</div>"); } 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("<div class='swiper-slide' data-month='"+i+"'>"+i+"月</div>"); } 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("<div class='swiper-slide' data-date='"+i+"'>"+i+"日</div>"); } 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<nextDayCount){ for(var i=currentDayCount+1;i<=nextDayCount;i++){ dateSwiper.appendSlide("<div class='swiper-slide' data-date='"+i+"'>"+i+"日</div>"); } } currentDayCount = nextDayCount; currentDate = parseInt($(dateSwiper.slides[dateSwiper.activeIndex+2]).attr("data-date")); } function showDateTime(options){ options = options||{}; var year = options.year; var month = options.month; var date = options.date; var type = 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"); }else if(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"); }else if(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); var yearSlidesLength = yearSwiper.slides.length; var minYear = parseInt($(yearSwiper.slides[2]).attr("data-year")); var maxYear = parseInt($(yearSwiper.slides[yearSlidesLength-3]).attr("data-year")); if(currentYear<minYear){ var prevYears = []; for(var i=minYear-3;i>currentYear-20;i--){ prevYears.push("<div class='swiper-slide' data-year='"+i+"'>"+i+"年</div>"); } yearSwiper.prependSlide(prevYears); yearSwiper.slideTo(17); }else if(currentYear>maxYear){ var nextSlides = []; for(var i=maxYear+2;i<=currentYear+20;i++){ nextSlides.push("<div class='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"); } var DateTimeWidget = { show:function(options){ init(); showDateTime(options); } }; window.DateTimeWidget = DateTimeWidget; })(jQuery);
datetime.html
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta name="format-detection" content="telephone=no"> <!-- 导入CSS --> <link href="dist/css/swiper.min.css" rel="stylesheet"> <link href="css/common/ys_datetime_selector.css" rel="stylesheet"> <!-- 导入JS --> <script src="dist/js/jquery-1.11.3.min.js"></script> <script src="dist/js/swiper.jquery.min.js"></script> </head> <body> <script src="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>
