php html5日历添加事件,HTML5自定义日历控件的示例代码详解-CSDN博客

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 = "

" 取消"+

" 选择日期 "+

" 确定 "+

/* ======================================== 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);

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

for(var i=currentDayCount+1;i<=nextDayCount;i++){

dateSwiper.appendSlide("

"+i+"日

");

}

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

var prevYears = [];

for(var i=minYear-3;i>currentYear-20;i--){

prevYears.push("

"+i+"年

");

}

yearSwiper.prependSlide(prevYears);

yearSwiper.slideTo(17);

}else if(currentYear>maxYear){

var nextSlides = [];

for(var i=maxYear+2;i<=currentYear+20;i++){

nextSlides.push("

"+i+"年

");

}

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

DateTimeWidget.show({

year:2018,

month:12,

date:31,

// type:"year",

callback:function(year,month,date){

console.log(year+"年"+month+"月"+date+"日");

}

});