前端开发原生JavaScript日历插件
摘要：永州招聘web前端开发|前端开发面试视频教程|计算机前端开发视频教程下载 源码点击这里查看 http://itakeo.com/blog/2015/10/24/swiperdate/ html 代码 <style> html, body { margin: 0; ……
永州招聘web前端开发|前端开发面试视频教程|计算机前端开发视频教程下载
源码点击这里查看 http://itakeo.com/blog/2015/10/24/swiperdate/
html 代码
<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>
<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>
前端要会移动开发吗|web前端开发面试视频教程|前端开发手机调试
» 本文来自：前端开发者 » 《前端开发原生JavaScript日历插件》
» 本文链接地址：https://www.rokub.com/4953.html
» 您也可以订阅本站：https://www.rokub.com
近期评论