Home > Article > Web Front-end > Detailed explanation of sample code for HTML5 custom calendar control
Detailed explanation of sample code for HTML5 custom calendar control
- 黄舟Original
- 2017-03-31 13:23:403093browse
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 = "<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>
The above is the detailed content of Detailed explanation of sample code for HTML5 custom calendar control. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Sample code using HTML5 to implement the function of scanning PC QR codes and triggering the WAP side to upload resourcesNext article：Sample code using HTML5 to implement the function of scanning PC QR codes and triggering the WAP side to upload resources
Related articles
See more- AlloyTouch full-screen scrolling plug-in creates a smooth H5 page in 30 seconds
- HTML5 actual combat and analysis of touch events (touchstart, touchmove and touchend)
- Detailed explanation of image drawing examples in HTML5 canvas 9
- Regular expressions and new HTML5 elements
- How to combine NodeJS and HTML5 to drag and drop multiple files to upload to the server