PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

HTML5自定义日历控件的示例代码详解

黄舟
黄舟 原创
2017-03-31 13:23:40 2781浏览

 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 =  "
"+ "
"+ "
"+ " 取消"+ " 选择日期 "+ " 确定 "+ "
"+ "
"+ "
"+ "
"+ "
"+ "
"+ "
"+ "
"+ "
"+ "
"+ "
"+ "
"+ "
"+ "
"+ "
"+ "
"+ "
"+ "
"+ "
"+ "
"+ "
"; /* ======================================== 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+"日
"); } } 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(currentYearcurrentYear-20;i--){ prevYears.push("
"+i+"年
"); } yearSwiper.prependSlide(prevYears); yearSwiper.slideTo(17); }else if(currentYear>maxYear){ var nextSlides = []; for(var i=maxYear+2;i<=currentYear+20;i++){ nextSlides.push("
"+i+"年
"); } 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



    
    
    
    
    
    
    
    
    
 
    
    
    
 
 


 
 
    
    

1342.jpg

以上就是 HTML5自定义日历控件的示例代码详解的详细内容,更多请关注php中文网其它相关文章!

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
上一条:使用HTML5实现扫描PC二维码且触发WAP端上传资源功能的示例代码 下一条: html5的setCustomValidity的详细介绍

相关文章

查看更多