简单的原生JS日期插件

来源:https://www.sucaihuo.com/js/3062.html 2017-09-22 11:53浏览(1759) 收藏

一款简单的原生JS日期插件,当前日期为绿色背景色突出显示,选中日期为蓝色背景色显示,可以点击上面的左右箭头来切换不同的月份或年份,最下面会显示选择结果。
简单的原生JS日期插件
分类:日期时间 > 日期控件 难易:初级
查看演示 下载资源 下载积分: 10 积分

页面的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>
标签: 日期日历
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2