先看效果图：
因为项目中的需要，在做旅游产品的微店时用到选择的时间，而且时间日历上要包含价格和余位等参数。
翻阅了其他资料，自己整理了一下，重新写了一个简单版的日历带上价格和余位的。文件没有其他依赖，全都是原生JS写，因为要在微信浏览器上访问，所以能不用jquery就不用。
有什么问题疑问，欢迎补充。下面看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<style type="text/css">
html,body {
font-family: "Microsoft YaHei"
}
.tdActive {
background: #2aadda;
color: #fff !important;
}
.Calendar {
padding: 20px 10px 0;
font-size: 14px !important;
text-align: left;
line-height: 1.5em;
}
.Calendar table {
width: 100%;
text-align: center;
border-collapse: collapse; /* 相邻的相邻边被合并 */
}
.Calendar table thead {
color: #333;
}
.Calendar table tr {
height: 60px;
vertical-align: baseline;
}
.Calendar table td {
font-size: 14px;
padding-top: 5px;
border:2px solid #fff;
border-radius: 5px;
}
.Calendar table tr.tou {
height: 40px;
text-align: center;
}
#idCalendarPre {
cursor: pointer;
float: left;
padding-right: 5px;
}
#toyear {
font-size: 16px;
text-align: center;
padding-bottom: 10px;
}
#idCalendarNext {
cursor: pointer;
float: right;
padding-right: 5px;
}
#idCalendar {
margin-top: 50px;
}
#idCalendar td.onToday {
font-weight: bold; /* 今天的颜色 */
color: #333;
font-size: 16px;
}
#idCalendar td.onSelect {
font-weight: bold;
color: blue;
}
.AAA {
/*background-color: green;*/
color: #2aadda;
}
</style>
</head>
<body>
<div class="mui-content" style="padding-bottom: 20px;">
<div class="Calendar border-b">
<div id="idCalendarPre"><</div>
<div id="idCalendarNext">></div>
<div id="toyear"><span id="idCalendarYear">2008</span>年 <span id="idCalendarMonth">8</span>月</div>
<table border="1px" cellpadding="0" cellspacing="0">
<thead>
<tr class="tou">
<td class="AAA" width="14.28%">日</td>
<td width="14.28%">一</td>
<td width="14.28%">二</td>
<td width="14.28%">三</td>
<td width="14.28%">四</td>
<td width="14.28%">五</td>
<td class="AAA" width="14.28%">六</td>
</tr>
</thead>
<tbody id="idCalendar"></tbody>
</table>
</div>
</div>
</body>
<script type="text/javascript">
var $$ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
var Class = {
create: function () {
return function () {
this.initialize.apply(this, arguments);
}
}
}
Object.extend = function (destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
var Calendar = Class.create();
Calendar.prototype = {
initialize: function (container, options) {
this.Container = $$(container); //容器(table结构)
this.Days = []; //日期对象列表
this.SetOptions(options);
this.Year = this.options.Year;
this.Month = this.options.Month;
this.SelectDay = this.options.SelectDay ? new Date(this.options.SelectDay) : null;
this.onSelectDay = this.options.onSelectDay;
this.onToday = this.options.onToday;
this.onFinish = this.options.onFinish;
this.Draw();
},
//设置默认属性
SetOptions: function (options) {
this.options = { //默认值
Year: new Date().getFullYear(), //显示年
Month: new Date().getMonth() + 1, //显示月
SelectDay: null, //选择日期
onSelectDay: function () {
}, //在选择日期触发
onToday: function () {
}, //在当天日期触发
onFinish: function () {
} //日历画完后触发
};
Object.extend(this.options, options || {});
},
//上一个月
PreMonth: function () {
//先取得上一个月的日期对象
var d = new Date(this.Year, this.Month - 2, 1);
//再设置属性
this.Year = d.getFullYear();
this.Month = d.getMonth() + 1;
//重新画日历
this.Draw();
},
//下一个月
NextMonth: function () {
var d = new Date(this.Year, this.Month, 1);
this.Year = d.getFullYear();
this.Month = d.getMonth() + 1;
this.Draw();
},
//画日历
Draw: function () {
//用来保存日期列表
var arr = [];
//用当月第一天在一周中的日期值作为当月离第一天的天数
for (var i = 1, firstDay = new Date(this.Year, this.Month - 1, 1).getDay(); i <= firstDay; i++) {
arr.push(" ");
}
//用当月最后一天在一个月中的日期值作为当月的天数
for (var i = 1, monthDay = new Date(this.Year, this.Month, 0).getDate(); i <= monthDay; i++) {
arr.push(i);
}
var frag = document.createDocumentFragment();
this.Days = [];
while (arr.length > 0) {
//每个星期插入一个tr
var row = document.createElement("tr");
//每个星期有7天
for (var i = 1; i <= 7; i++) {
var cell = document.createElement("td");
cell.innerHTML = " ";
if (arr.length > 0) {
var d = arr.shift();
cell.innerHTML = d;
if (d > 0) {
this.Days[d] = cell;
//判断是否今日
if (this.IsSame(new Date(this.Year, this.Month - 1, d), new Date())) {
this.onToday(cell);
}
//判断是否选择日期
if (this.SelectDay && this.IsSame(new Date(this.Year, this.Month - 1, d), this.SelectDay)) {
this.onSelectDay(cell);
}
}
}
row.appendChild(cell);
}
frag.appendChild(row);
}
//先清空内容再插入(ie的table不能用innerHTML)
while (this.Container.hasChildNodes()) {
this.Container.removeChild(this.Container.firstChild);
}
this.Container.appendChild(frag);
this.onFinish();
},
//判断是否同一日
IsSame: function (d1, d2) {
return (d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate());
}
};
var cale = new Calendar("idCalendar", {
//要选择的日期，可注释
SelectDay: new Date().setDate(),
//增加 类
onSelectDay: function (o) {
o.className = "onSelect";
console.log(o)
},
onToday: function (o) {
o.className = "onToday";
o.innerHTML = "今天";
},
onFinish: function () {
$$("idCalendarYear").innerHTML = this.Year;
if (this.Month < 10) {
$$("idCalendarMonth").innerHTML = "0" + this.Month;
} else {
$$("idCalendarMonth").innerHTML = this.Month; //表头年份
}
var trList = document.getElementById("idCalendar").getElementsByTagName("tr");
for (var i = 0; i < trList.length; i++) {
var tdFir = trList[i].childNodes
tdFir[0].style.color = "#2aadda";
tdFir[6].style.color = "#2aadda";
}
var currentYear = parseInt(this.Year);
var currentMonth = parseInt(this.Month);
// 模拟后台返回的时间数据
var dateArr = [
{
"TourDate":"2017-06-26",
"Week":"周一",
"Price":1680,
"DateNumber":1,
},{
"TourDate":"2017-06-27",
"Week":"周二",
"Price":1630,
"DateNumber":5,
},{
"TourDate":"2017-06-28",
"Week":"周三",
"Price":1610,
"DateNumber":2,
},{
"TourDate":"2017-06-29",
"Week":"周四",
"Price":1680,
"DateNumber":4,
},{
"TourDate":"2017-06-30",
"Week":"周五",
"Price":1680,
"DateNumber":6,
}];
for (var i = 0; i < dateArr.length; i++) {
var cur = dateArr[i].TourDate;
var year = parseInt(cur.split('-')[0]);
var month = parseInt(cur.split('-')[1]);
var day = parseInt(cur.split('-')[2]);
var listid = dateArr[i].ListId;
if (year == currentYear && month == currentMonth) {
this.Days[day].innerHTML = "<div style='z-index: -1'>"
+ "<div style='font-size: 14px;height: 18px;'>" + day + "</div>"
+ "<div style='font-size: 10px;height: 15px;'>￥" + dateArr[i].Price + "</div>"
+ "<div style='font-size: 10px;'>余位" + dateArr[i].DateNumber + "</div>"
+ "</div>";
}
}
}
});
$$("idCalendarPre").onclick = function () {
cale.PreMonth();
selectDay();
};
$$("idCalendarNext").onclick = function () {
cale.NextMonth();
selectDay();
};
function selectDay() {
//点击表格里面的值
var tdList = document.getElementsByTagName('td');
for (var i = 0; i < tdList.length; i++) {
tdList[i].onclick = function (e) {
var current = this;
if (current.innerHTML === " ") console.log('空');
if (current.innerHTML !== " ") {
if (this.childNodes[0].childNodes[0] == undefined) {
console.log("该班期不能选择")
}else {
var num = this.childNodes[0].childNodes[0].innerHTML;
if (num == "今天") {
num = new Date().getDate();
}
if (num < 10 && num.substring(0, 1)) {
num = "0" + num
}
for (var i = 0; i < document.getElementsByTagName('td').length; i++) {
document.getElementsByTagName('td')[i].classList.remove("tdActive")
current.classList.add("tdActive")
}
var selectDay = (document.getElementById('idCalendarYear').innerHTML + "/" + document.getElementById("idCalendarMonth").innerHTML + "/" + num).substring(0, 10);
console.log(selectDay)
}
}
}
}
}
selectDay();
</script>
</html>猛戳这里预览 →
