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

.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);
 }
}

(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);

<!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>