<script src="http://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="./calendar.js" type="text/javascript" charset="utf8"></script>`
<link rel="stylesheet" href="./calendar.css" />
<div class="calendar-container">
<div class="calendar-title">
<div>
<input class="calendar-date" type="date">
</div>
<div>
<div class="calendar-prevbtn"><span class="glyphicon glyphicon-chevron-left"></span></div>
<div class="calendar-fdate" data-format="yyyy年MM月"></div>
<div class="calendar-nextbtn"><span class="glyphicon glyphicon-chevron-right"></span></div>
<div style="clear:both;"></div>
</div>
<div>
<button class="calendar-backbtn btn btn-default">
回到今天
</button>
</div>
<div style="float: none;clear: both;"></div>
</div>
</div>
$('.calendar-container').calendar();$reference - 设置参考元素,日历会按照参考元素自适应宽高,默认为设置的容器。
title - 设置标题,默认['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']。
choose - 选中事件,默认为null。
rander - 重绘。
setDate - 参数 tdate ,支持 string 和 Date 类型传入,切换到日期月份,但不选中。
chooseDate - 参数 tdate ,支持 string 和 Date 类型传入,选中这个日期。
getSelected - 参数 fun ,使用 fun(res){ item = res; } 回调传递当前选中日期。
appendHtml - 参数 data 有两个属性 date 、 html,在日历 td 中添加Html,例 {date:'2019-10-12',html:'<a>Hello world</a>'}。
reset - 参数 options 同初始化参数相同，重置calendar。
$('.calendar-container').calendar({
title: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
choose:function(item){
console.log(item.attr("data-date"));
}
});