一款简单的原生JS日期插件,当前日期为绿色背景色突出显示,选中日期为蓝色背景色显示,可以点击上面的左右箭头来切换不同的月份或年份,最下面会显示选择结果。
页面的head部分,需远程调用一个字体样式文件,并设置好页面元素的样式,代码如下:
<link rel="stylesheet" href="https://at.alicdn.com/t/font_234130_nem7eskcrkpdgqfr.css">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
#schedule-box{
width: 320px;
margin: 30px auto;
padding: 35px 20px;
font-size: 13px;
}
.schedule-hd{
display: flex;
justify-content: space-between;
padding: 0 15px;
}
.today{
flex: 1;
text-align: center;
}
.ul-box{
overflow: hidden;
}
.ul-box > li{
float: left;
width: 14.28%;
text-align: center;
padding: 5px 0;
}
.other-month{
color: #999999;
}
.current-month{
color: #333333;
}
.today-style{
border-radius: 50%;
background: #58d321;
}
.arrow{
cursor: pointer;
}
.dayStyle{
display: inline-block;
width: 35px;
height: 35px;
border-radius: 50%;
text-align: center;
line-height: 35px;
cursor: pointer;
}
.current-month > .dayStyle:hover{
background: #00BDFF;
color: #ffffff;
}
.today-flag{
background: #00C2B1;
color: #fff;
}
.boxshaw{
box-shadow: 2px 2px 15px 2px #e3e3e3;
}
.selected-style {
background: #00BDFF;
color: #ffffff;
}
#h3Ele{
text-align: center;
padding: 10px;
}
</style>
页面的body部分,需设置好日历容器和选中结果的容器,代码如下:
<div id='schedule-box' class="boxshaw"></div>
<div>
<h3 id='h3Ele'></h3>
</div>
页面的底部,需引入日期插件,并启用插件设置好相关参数,代码如下:
<script type="text/javascript" src="js/schedule.js"></script>
<script type="text/javascript">
var mySchedule = new Schedule({
el: '#schedule-box',
//date: '2018-9-20',
clickCb: function (y,m,d) {
document.querySelector('#h3Ele').innerHTML = '日期:'+y+'-'+m+'-'+d
},
nextMonthCb: function (y,m,d) {
document.querySelector('#h3Ele').innerHTML = '日期:'+y+'-'+m+'-'+d
},
nextYeayCb: function (y,m,d) {
document.querySelector('#h3Ele').innerHTML = '日期:'+y+'-'+m+'-'+d
},
prevMonthCb: function (y,m,d) {
document.querySelector('#h3Ele').innerHTML = '日期:'+y+'-'+m+'-'+d
},
prevYearCb: function (y,m,d) {
document.querySelector('#h3Ele').innerHTML = '日期:'+y+'-'+m+'-'+d
}
});
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791