一款jQuery带数据的日历插件,可以预设不同日期的数据内容,点选有数据的日期后,可以通过按钮获取对应的数据内容,可以用于日期的备忘录、签到等,喜欢的童鞋请收下吧。
页面的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>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791