公司项目中用到，以前没做过，废了好几个小时 终于做好了 先来效果图（暂时没写样式 凑合着看吧）
点击左右按钮都能改变月份 下方表格中的数据也会跟着变化
贴上代码 :
html部分：
<div style="position:absolute;top:0px;left:220px;right:0px;height:250px;" >
<!--上面显示的年份月份 -->
<div style="position:absolute;top:0px;left:0px;right:0px;height:30px;" >
<span style="position:absolute;top:6px;left:40px;width:100px;height:24px;">
<img src="${ctx}/upload/img/left.png" alt="上个月" onclick="clickLeft()" class="showImg" width="21" />
</span>
<span style="position:absolute;top:0px;left:43%;width:150px;height:30px;font-size: 24px;" id="thisYears"></span>
<span style="position:absolute;top:6px;right:40px;width:10px;height:24px;">
<img src="${ctx}/upload/img/right.png" alt="下个月" onclick="clickRight()" class="showImg" width="21"/>
</span>
</div>
<!--table部分 -->
<div style="position:absolute;top:30px;left:0px;right:0px;height:220px;">
<table style="width: 100% ;height: 100%;text-align:center;" border="1px" cellspacing="0" cellpadding="0" >
<thead style=" font-size: 24px;">
<tr>
<td>
<div>星期日</div>
</td>
<td>
<div>星期一</div>
</td>
<td>
<div>星期二</div>
</td>
<td>
<div>星期三</div>
</td>
<td>
<div>星期四</div>
</td>
<td>
<div>星期五</div>
</td>
<td>
<div>星期六</div>
</td>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
</div>
JS部分
<script type="text/javascript">
var currentYear = 0;//当前显示的年
var currentMonth = 0;//当前显示的月
//日历填充方法
function calendar (){
var date = new Date();
layTable(date);
currentYear =thisYear(date);
currentMonth =thisMonth(date);
$('#thisYears').html(currentYear+"年"+currentMonth+"月");
} //铺表格
function layTable(date){
var startDays = thisDays(date);//1号星期几
var count = getDays(thisYear(date),thisMonth(date));//获取这个月有多少天
var tr_str= Math.ceil((count + startDays)/7); //取上限 打印多少行
var td_str = "";
var index =0;
var istop = true;//铺表格的时候要判断是否是第一行
for(var i=0;i<tr_str;i++){ //循环多少行
td_str +="<tr class='datetr'>";
for(var j=1;j<=7;j++){
if(startDays>0 && istop==true){//如果这个月第一天不是星期天，那么就对应的打印多少个空<td></td>
istop = false;
for(var l=0;l<startDays;l++){
td_str +="<td></td>";
}
j=startDays; //因为内循环已经铺了几个空位了，外面的循环就要少铺设对应的条数
}else{
index++;
if(index<=count){//如果超过了这个月的天数，就再次给赋空值
td_str +="<td><div onclick='clickdate("+thisYear(date)+","+thisMonth(date)+","+index+")'>"+index+"</div></td>";
}else{
td_str +="<td></td>";
}
}
}
td_str +="</tr>";
$('#tbody').append(td_str);
td_str = "";
}
} //获取年份
function thisYear(date){
return date.getFullYear();
}
//获取月份
function thisMonth(date){
return date.getMonth()+1;
}
//获取该月份的第一天是星期几 0是星期天 1 2 3 4 5 6
function thisDays(date){
date.setDate(1);
var week = date.getDay();
return week;
} // 获取当月一共有多少天
function getDays(year,mouth){
//定义当月的天数；
var days ;
//当月份为二月时，根据闰年还是非闰年判断天数
if(mouth == 2){
days= year % 4 == 0 ? 29 : 28;
}
//月份为：1,3,5,7,8,10,12 时，为大月.则天数为31；
else if(mouth == 1 || mouth == 3 || mouth == 5 || mouth == 7 || mouth == 8 || mouth == 10 || mouth == 12){
days= 31;
}
//其他月份，天数为：30.
else{
days= 30;
}
return days;
} //点击左箭头
function clickLeft(){
if(currentMonth-1 != 0){
currentMonth = currentMonth-1;
var date = new Date(currentYear,currentMonth-1);
}else{
currentYear = currentYear-1;
currentMonth = 12;
var date = new Date(currentYear,currentMonth-1);
}
$('#thisYears').html(currentYear+"年"+currentMonth+"月");
clearTable();
layTable(date);
}
//点击右箭头
function clickRight(){
if(currentMonth+1 < 13){
currentMonth = currentMonth+1;
var date = new Date(currentYear,currentMonth-1);
}else{
currentYear = currentYear+1;
currentMonth = 1;
var date = new Date(currentYear,currentMonth-1);
}
$('#thisYears').html(currentYear+"年"+currentMonth+"月");
clearTable();
layTable(date);
}
//清空表格中的数
function clearTable(){
$("#tbody").html("");
} //当点击时间时
function clickdate(year,month,day){//获取年月日
alert(year+"年"+month+"月"+day+"日");
} </script>
JS格式化时间：
格式化前：Wed Oct 18 2017 00:00:00 GMT+0800 (中国标准时间)
格式化后：2017-10-18
代码：
//格式化时间
function formatDate (date) {
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? '0' + m : m;
var d = date.getDate();
d = d < 10 ? ('0' + d) : d;
return y + '-' + m + '-' + d;
};