JS自制极简日历Demo
这个日历界面不属于任何插件，纯粹用最基本的JS函数获取到每个位置对应的日期，然后再通过遍历拼接table表单的方式赋值到HTML里面进行展示，日历效果的显示，其中使用到的文件只需要一个Jquery的JS文件即可实现如下效果：
Demo只是一个简单的日历模板，没有太多函数和限制，开发人员可以基于自己的想法在里面任意更改
下列是JS代码：
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript">
$(function () {
//获取当前日期及其年月
var todate=new Date();
var year=todate.getFullYear();//当前年份
var month=todate.getMonth()+1;//当前月份
$("#tdtitle").html(year+"年"+month+"月");
//传入ID定义初始化方法
InitialMethod($("#tbTypesetting"), year, month, "trclass", 'tdclass');
});
//初始化方法
function InitialMethod(tabID, year, month, style, tdclass)
{
//获取月份的第一天
var MonthOne = new Date(year + '/' + month + '/01');
//获取第一天是星期几
var weekOne = MonthOne.getDay();
//几天前
var AgoDay = (weekOne) * (-1);
//当月最大日期的索引
var MaxDay = getCountDays(MonthOne)-1;
//当前日期
var today = getToday();
var strhtml;
var countNum = 0;
//6行 7列
for (var i = 0; i < 6; i++)
{
strhtml += "<tr class='" + style + "'>";
for (var j = 0; j < 7; j++)
{
var sum = AgoDay + countNum;
if (sum < 0 || sum > MaxDay)
{
strhtml += "<td class='" + tdclass + "' style='color:#cccccc;'>" + ReturnDay(sum,MonthOne) + "</td>";
}
else if (ReturnDay(sum,MonthOne) == today) {
strhtml += "<td class='" + tdclass + "' style='color:red;'>" + ReturnDay(sum,MonthOne) + "</td>";
}
else {
strhtml += "<td class='" + tdclass + "'>" + ReturnDay(sum,MonthOne) + "</td>";
}
countNum++;
}
strhtml+="</tr>";
}
tabID.html(strhtml);
}
//几天前/后的日期
function ReturnDay(day,OneDate) {
var time = new Date(OneDate);
time.setDate(time.getDate() + day);//获取Day天后的日期
var y = time.getFullYear();
var m = time.getMonth() + 1;//获取当前月份的日期
var d = time.getDate();
return d;
}
//当月有多少天
function getCountDays(time) {
var curDate = new Date(time);
/* 获取当前月份 */
var curMonth = curDate.getMonth();
/* 生成实际的月份: 由于curMonth会比实际月份小1, 故需加1 */
curDate.setMonth(curMonth + 1);
/* 将日期设置为0, 这里为什么要这样设置, 我不知道原因, 这是从网上学来的 */
curDate.setDate(0);
/* 返回当月的天数 */
return curDate.getDate();
}
//当前日期
function getToday()
{
var time = new Date();
var today = time.getDate();
return today;
}
</script>
HTML代码：
<body>
<div id="SlopeCheckContainer" style="text-align:center; margin:auto;">
<table id="concent" class="tableclass">
<tr class="trclass"><td class="tdclass" colspan="7" id="tdtitle">2019年8月</td></tr>
<tr style="height:5%">
<td class="tdclass">星期天</td>
<td class="tdclass">星期一</td>
<td class="tdclass">星期二</td>
<td class="tdclass">星期三</td>
<td class="tdclass">星期四</td>
<td class="tdclass">星期五</td>
<td class="tdclass">星期六</td>
</tr>
<tbody id="tbTypesetting"></tbody>
</table>
</div>
</body>
Demo的完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.tableclass
{
width:100%;
clear:both;
font-size: 12px;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-collapse: collapse;
}
.trclass
{
height:50px;
}
.tdclass
{
border-left: 1px solid #cccccc;
border-top: 1px solid #cccccc;
background-color:#ffffff;
}
</style>
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript">
$(function () {
//获取当前日期及其年月
var todate=new Date();
var year=todate.getFullYear();//当前年份
var month=todate.getMonth()+1;//当前月份
$("#tdtitle").html(year+"年"+month+"月");
//传入ID定义初始化方法
InitialMethod($("#tbTypesetting"), year, month, "trclass", 'tdclass');
});
//初始化方法
function InitialMethod(tabID, year, month, style, tdclass)
{
//获取月份的第一天
var MonthOne = new Date(year + '/' + month + '/01');
//获取第一天是星期几
var weekOne = MonthOne.getDay();
//几天前
var AgoDay = (weekOne) * (-1);
//当月最大日期的索引
var MaxDay = getCountDays(MonthOne)-1;
//当前日期
var today = getToday();
var strhtml;
var countNum = 0;
//6行 7列
for (var i = 0; i < 6; i++)
{
strhtml += "<tr class='" + style + "'>";
for (var j = 0; j < 7; j++)
{
var sum = AgoDay + countNum;
if (sum < 0 || sum > MaxDay)
{
strhtml += "<td class='" + tdclass + "' style='color:#cccccc;'>" + ReturnDay(sum,MonthOne) + "</td>";
}
else if (ReturnDay(sum,MonthOne) == today) {
strhtml += "<td class='" + tdclass + "' style='color:red;'>" + ReturnDay(sum,MonthOne) + "</td>";
}
else {
strhtml += "<td class='" + tdclass + "'>" + ReturnDay(sum,MonthOne) + "</td>";
}
countNum++;
}
strhtml+="</tr>";
}
tabID.html(strhtml);
}
//几天前/后的日期
function ReturnDay(day,OneDate) {
var time = new Date(OneDate);
time.setDate(time.getDate() + day);//获取Day天后的日期
var y = time.getFullYear();
var m = time.getMonth() + 1;//获取当前月份的日期
var d = time.getDate();
return d;
}
//当月有多少天
function getCountDays(time) {
var curDate = new Date(time);
/* 获取当前月份 */
var curMonth = curDate.getMonth();
/* 生成实际的月份: 由于curMonth会比实际月份小1, 故需加1 */
curDate.setMonth(curMonth + 1