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>