先看效果图:

2121.png

因为项目中的需要,在做旅游产品的微店时用到选择的时间,而且时间日历上要包含价格和余位等参数。
翻阅了其他资料,自己整理了一下,重新写了一个简单版的日历带上价格和余位的。文件没有其他依赖,全都是原生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">&lt;</div>
            <div id="idCalendarNext">&gt;</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("&nbsp;");
            }
            //用当月最后一天在一个月中的日期值作为当月的天数
            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 = "&nbsp;";
                    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 === "&nbsp;") console.log('空');
                if (current.innerHTML !== "&nbsp;") {
                    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>

猛戳这里预览 →