【移动应用开发技术】HTML5 自定义日历控件

【移动应用开发技术】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-p_w_picpath:

-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-p_w_picpath:

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'

d