日期插件,非常好用(移动、PC端均可用)

转载 (原文地址) youhongyun 教程 转载 403阅读 2018-01-22 10:35:01 举报

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="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: 8px 12px;}
.containter{width:320px;margin:auto}.calender-wrap{-webkit-animation:clafade .3s ease;-moz-animation:clafade .3s ease;animation:clafade .3s ease;padding:5px;background:#fff;width:240px;box-shadow:0 5px 10px rgba(0,0,0,0.2);border-radius:4px;position:relative;font-family:"Microsoft yahei";position:absolute;z-index:1000}.calender-wrap{border:1px solid #e2e2e2}.calender-wrap:after{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #eee;border-top:0;border-bottom-color:#d7d7d7;position:absolute;left:9px;top:-7px}.calender-wrap:before{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #ffffff;border-top:0;position:absolute;left:10px;top:-6px;z-index:10}.calender-caption{height:35px;border-bottom:1px solid #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:1px solid #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:1px solid #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:2px 4px;border-radius: 3px; margin:0 3px;}#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:15px 0;border:1px solid #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:1px solid #eee;width:100%;margin-top:-1px;padding:7px 0px 2px 0;overflow:hidden}.calender-button a{display:block;text-align:center;padding:0px 15px;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-button a: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}@keyframes clafade{0%{transform:scale(0.95);opacity:0}100%{transform:scale(1);opacity:1}}@-webkit-keyframes clafade{0%{-webkit-transform:scale(0.95);opacity:0}100%{-webkit-transform:scale(1);opacity:1}}
</style>
</head>
<body>
<input type="text" id="inp" placeholder="选择日期">
<input type="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>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复