html calendar控件,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{