前端开发者前端移动端开发插件|前端开发者
html 代码
<!DOCTYPE html>
<html>
<head>
<metacharset=”UTF-8″>
<title>日期插件</title>
<metaname=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0″
/>
<style>
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
}
}
</style>
</head>
<body>
<inputtype=”text” id=”inp” placeholder=”选择日期”>
<inputtype=”text” id=”inp2″ placeholder=”选择日期”>
<script src=”http://www.itakeo.com/down/calender2.js”></script>
<script>
;
(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
});
})();
</script>
</body>
</html>
前端移动端开发插件|网站前端开发
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册