java前端的日期插件,Web前端开发移动、PC端 日期插件

/p>

日期插件

/>

html,

body{

margin:0;

padding:0;

}

body{

background:#fff;

}

input{

margin:30px;

padding:8px12px;

}

.containter{

width:320px;

margin:auto

}

.calender-wrap{

-webkit-animation: clafade .3sease;

-moz-animation: clafade .3sease;

animation: clafade .3sease;

padding:5px;

background:#fff;

width:240px;

box-shadow:05px10pxrgba(0,0,0,0.2);

border-radius:4px;

position:relative;

font-family:”Microsoft yahei”;

position:absolute;

z-index:1000

}

.calender-wrap{

border:1pxsolid#e2e2e2

}

.calender-wrap:after{

content:”;

display:inline-block;

border-left:7pxsolidtransparent;

border-right:7pxsolidtransparent;

border-bottom:7pxsolid#eee;

border-top:0;

border-bottom-color:#d7d7d7;

position:absolute;

left:9px;

top:-7px

}

.calender-wrap:before{

content:”;

display:inline-block;

border-left:6pxsolidtransparent;

border-right:6pxsolidtransparent;

border-bottom:6pxsolid#ffffff;

border-top:0;

position:absolute;

left:10px;

top:-6px;

z-index:10

}

.calender-caption{

height:35px;

border-bottom:1pxsolid#ddd;

z-index:2;

background:#eee

}

.calender-content{

position:relative;

overflow:hidden

}

.calender-content:after{

content:”;

display:block;

clear:both

}

.calender-cell{

cursor:pointer;

float:left;

width:14.28571428%;

height:35px;

text-align:center;

line-height:35px;

font-size:12px;

color:#000;

z-index:1;

border-bottom:1pxsolid#eee

}

.calender-cell:hover{

background:#eee

}

.calender-caption.calender-cell:hover{

background:none

}

.calender-cell-dark{

cursor:no-drop;

color:#b9b9b9

}

.calender-caption.calender-cell{

height:35px;

line-height:35px;

font-size:13px;

color:#111;

font-weight:bold

}

.calender-header{

text-align:center;

line-height:35px;

text-align:center;

color:#888;

padding-bottom:4px;

margin-bottom:1px;

background:#fff;

position:relative;

border-bottom:1pxsolid#e6e6e6;

font-size:14px

}

#calender-prev,

#calender-next{

text-decoration:none;

display:block;

width:14.2857%;

height:35px;

background:#fff;

position:absolute;

left:0%;

top:0px;

font-family:’宋体’;

font-size:14px;

color:#555

}

#calender-prev,

#calender-next{

color:#999;

font-size:16px

}

#calender-prev:hover,

#calender-next:hover{

background:#eee;

border-radius:5px;

color:#222

}

#calender-next{

left:auto;

right:0%

}

#calender-year,

#calender-mon{

cursor:pointer;

padding:2px4px;

border-radius:3px;

margin:03px;

}

#calender-year:hover,

#calender-mon:hover{

background:#eee

}

.calender-list{

overflow:hidden

}

.calender-list2,

.calender-list3{

display:none

}

.calender-year-cell,

.calender-mon-cell{

width:32.41%;

float:left;

border-radius:4px;

text-align:center;

font-size:12px;

padding:15px0;

border:1pxsolid#fff

}

.calender-year-cell:hover,

.calender-mon-cell:hover{

background:#eee;

cursor:pointer

}

.calender-cell.active,

.calender-year-cell.active,

.calender-mon-cell.active{

background:#23acf1;

color:#fff

}

.calender-cell.active:hover,

.calender-year-cell.active:hover,

.calender-mon-cell.active:hover{

background:#23acf1;

color:#fff

}

.calender-button{

border-top:1pxsolid#eee;

width:100%;

margin-top:-1px;

padding:7px0px2px0;

overflow:hidden

}

.calender-buttona{

display:block;

text-align:center;

padding:0px15px;

height:25px;

line-height:25px;

float:right;

background:#23acf1;

color:#fff;

margin-right:5px;

cursor:pointer;

margin-left:5px;

font-size:12px;

text-decoration:none

}

.calender-buttona:hover{

background:#0084c9

}

.calender-wrap.year.calender-list,

.calender-wrap.month.calender-list{

display:none

}

.calender-wrap.year.calender-list2{

display:block

}

.calender-wrap.month.calender-list3{

display:block

}

@keyframesclafade{

0% {

transform:scale(0.95);

opacity:0

}

100% {

transform:scale(1);

opacity:1

}

}

@-webkit-keyframesclafade{

0% {

-webkit-transform:scale(0.95);

opacity:0

}

100% {

-webkit-transform:scale(1);

opacity:1

}

}

;

(function () {

calender(‘#inp’).init(function(date){

this.value =date

});

calender(‘#inp2’).init({

format: ‘yyyy-MM-dd’,

date: [2020, 5, 12],

button: true

},function(date){

this.value =date

});

})();