masyarakat
Belajar
Perpustakaan Alatan
Alat AI
Masa lapang
cari
Melayu
Rumah > hujung hadapan web > Tutorial H5 > HTML5自定义日历控件的示例代码详解

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

黄舟
Lepaskan： 2017-03-31 13:23:40
asal
3176 orang telah melayarinya

 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);
    }
}
Salin selepas log masuk

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=&#39;ys-datetime-selector display-hide&#39;>    "+
        "  <div class=&#39;ys-datetime-selector-content&#39;>          "+
        "     <div class=&#39;ys-datetime-operation-bar&#39;>         "+
        "        <a class=&#39;ys-datetime-cancel-btn&#39;>取消</a>"+
        "        <span>选择日期</span>                     "+
        "        <a class=&#39;ys-datetime-ok-btn&#39;>确定</a>    "+
        "     </div>                                        "+
        "     <div class=&#39;ys-datetime-blocks&#39;>              "+
        "        <div class=&#39;ys-datetime-year-block&#39;>      "+
        "           <div class=&#39;swiper-container&#39;>        "+
        "              <div class=&#39;swiper-wrapper&#39;></div>"+
        "           </div>                                "+
        "        </div>                                    "+
        "        <div class=&#39;ys-datetime-month-block&#39;>     "+
        "           <div class=&#39;swiper-container&#39;>        "+
        "              <div class=&#39;swiper-wrapper&#39;></div>"+
        "           </div>                                "+
        "        </div>                                    "+
        "        <div class=&#39;ys-datetime-date-block&#39;>      "+
        "           <div class=&#39;swiper-container&#39;>        "+
        "              <div class=&#39;swiper-wrapper&#39;></div>"+
        "           </div>                                "+
        "        </div>                                    "+
        "        <div style=&#39;clear:both;&#39;></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=&#39;swiper-slide&#39; data-year=&#39;"+i+"&#39;>"+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=&#39;swiper-slide&#39; data-year=&#39;"+i+"&#39;>"+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=&#39;swiper-slide&#39; data-year=&#39;"+i+"&#39;>"+i+"年</div>");
        }
        var prevYears = [];
        for(var i=currentYear-3;i>currentYear-100;i--){
            prevYears.push("<div class=&#39;swiper-slide&#39; data-year=&#39;"+i+"&#39;>"+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=&#39;swiper-slide&#39; data-month=&#39;"+i+"&#39;>"+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=&#39;swiper-slide&#39; data-date=&#39;"+i+"&#39;>"+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=&#39;swiper-slide&#39; data-date=&#39;"+i+"&#39;>"+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=&#39;swiper-slide&#39; data-year=&#39;"+i+"&#39;>"+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=&#39;swiper-slide&#39; data-year=&#39;"+i+"&#39;>"+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);
Salin selepas log masuk

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>
Salin selepas log masuk

1342.jpg

Atas ialah kandungan terperinci HTML5自定义日历控件的示例代码详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
HTML5，自定义，日历控件
Artikel sebelumnya：使用HTML5实现扫描PC二维码且触发WAP端上传资源功能的示例代码 Artikel seterusnya： html5的setCustomValidity的详细介绍
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
javascript - Sila beritahu saya tentang masalah menukar fungsi panggil balik jq untuk menjanjikan pelaksanaan
daripada 1970-01-01 08:00:00
0
0
0
javascript - Kekeliruan tentang menghantar parameter dalam tindak balas
daripada 1970-01-01 08:00:00
0
0
0
javascript - gambar rajah tindanan atribut js
daripada 1970-01-01 08:00:00
0
0
0
javascript - aplikasi halaman tunggal angularjs Bagaimana untuk menyelesaikan masalah tidak menatal ke bahagian atas halaman selepas halaman menatal ke bawah dan navigasi melompat ke halaman baharu?
daripada 1970-01-01 08:00:00
0
0
0
javascript - Apabila membina projek dengan vue-cli, anda perlu memperkenalkan fail js dan CSS statik tempatan Bagaimana untuk membungkusnya?
daripada 1970-01-01 08:00:00
0
0
0
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan