效果图:
点击左右边的箭头,实现上一月或者下一月的切换。
jsp内容
<!--时间月份选择框-->
<table id="querytable" style="border:1px;">
<tr>
<td style="width: 20%;">
<span class="leftspan">
<span style="color:#FF0000;">
<img src="img/left.jpg" style="height:35px; width:35px;" οnclick="reduceMonth()"/>
</span>
</span>
</td>
<td align="center">
<label id="beginTime" class="kbtn" style="height:100px; width:200px;font-size: 35px;">
</label>
</td>
<td style="width: 20%;" align="right">
<span class="rightspan">
<span style="color:#FF0000;">
<img src="img/right.jpg" style="height:35px; width:35px;" οnclick="addMonth()" />
</span>
</span>
</td>
</tr>
</table>
说明:
1)、箭头图片可以自行从网上下载
js内容
//月份加减处理
function addMonth() {
var s = document.getElementById("beginTime").innerHTML;
var arr = s.split("-");
var year = parseInt(arr[0]);
var month = parseInt(arr[1]);
//判断month
if (month == 12) {
year = year + 1;
month = 1;
} else {
month = month + 1;
}
document.getElementById("beginTime").innerHTML = year + "-" + month;
initTable(year, month-1);
}
function reduceMonth() {
var s = document.getElementById("beginTime").innerHTML;
var arr = s.split("-");
var year = parseInt(arr[0]);
var month = parseInt(arr[1]);
console.log(year + "/" + month);
//判断month
if (month == 1) {
year = year - 1;
month = 12;
} else {
month = month - 1;
}
document.getElementById("beginTime").innerHTML = year + "-" + month;
initTable(year, month-1);
}
----------
参考文章
https://blog.csdn.net/sinat_16463137/article/details/61925606