jQuery带数据的日历插件

来源:https://www.sucaihuo.com/js/2515.html 2017-07-23 23:05浏览(2908) 收藏

一款jQuery带数据的日历插件,可以预设不同日期的数据内容,点选有数据的日期后,可以通过按钮获取对应的数据内容,可以用于日期的备忘录、签到等,喜欢的童鞋请收下吧。
jQuery带数据的日历插件
分类:日期时间 > 日期控件 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的head部分,仅需引入一个CSS样式文件即可,代码如下:

<link type="text/css" rel="stylesheet" href="css/calendar-pro.css">

页面的body部分,一个div容器用来放置日历,一个按钮用来触发获取日期数据,代码如下:

<div class="calendar-box demo-box"></div>
<button onclick="getActive()">获取选中日期值</button>

页面的底部,先引入jQuery库和一个JS插件,然后启用日历插件并设置好相应的参数,代码如下:

<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/calendar-pro.js"></script>
<script type="text/javascript">
$('.calendar-box').calendar({
	ele : '.demo-box', //依附
	title : '选择预约时间',
//	beginDate : '2017-05-07',
//	endDate : '2017-07-04',
	data : [
		{date:'2017-05-07',data:'107'},
		{date:'2017-05-08',data:'108'},
		{date:'2017-05-09',data:'109'},
		{date:'2017-05-10',data:'110'},
		{date:'2017-05-11',data:'111'},
		{date:'2017-05-12',data:'112'},
		{date:'2017-05-13',data:'113'},
//		......省略部分演示数据
//		{date:'2017-06-25',data:'125'},
		{date:'2017-06-26',data:'126'},
		{date:'2017-06-27',data:'127'},
		{date:'2017-06-28',data:'128'},
		{date:'2017-06-29',data:'129'},
		{date:'2017-06-30',data:'130'},
		{date:'2017-07-01',data:'121'},
		{date:'2017-07-02',data:'122'},
		{date:'2017-07-03',data:'123'},
		{date:'2017-07-04',data:'124'},
	]
});
function getActive(){
	var data = $('.calendar-box').calendarGetActive();
	console.log(data);
	alert(data.date+" ¥"+data.money);
}
</script>
评论0
头像

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

1 2