Detailed explanation of sample code for HTML5 custom calendar control

HTML5Example of custom calendarcontrol Detailed code explanation

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+"日