代码改变世界

从日历中获取想要的日期

2014-04-13 15:04  那时候的我  阅读(1497)  评论(0)  编辑  收藏  举报

　　今天这篇要写的东西其实和上一篇文章是同一个任务中的。就是在输入框中输入时间段，然后从数据库中获取这个时间段的所有数据，下面是效果图：

 

点击日历上的日期，输入框中就会显示选择的日期。

　　要想实现这个效果，首先得有一个日历，刚好之前有写过一个简单的日历插件，所以就派上用场了。下面是日历的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div id="calendar"></div>
    <script>
        var Calendar = function (id) {
            this.init(id);
        };

        Calendar.prototype = {
            constructor: Calendar,
            init: function (id) {
                this.nowDate = new Date();
                this.year = this.nowDate.getFullYear();
                this.month = this.nowDate.getMonth();
                this.date = this.nowDate.getDate();
                this.day = this.nowDate.getDay();
                this.createElement(id);
            },
            isLeapYear: function (year) {
                return (year > 0) && !(year % 4) && ((year % 100) || !(year % 400));
            },
            getDate: function () {
                var date = this.nowDate;
                return date.getFullYear() + "年" + date.getMonth() + 1 + "月" + date.getDate() + "日";
            },
            createElement: function (id) {
                var cal = document.getElementById(id);
                var div = document.createElement("div");
                div.innerHTML = this.getDate();
                cal.appendChild(div);
                var tab = document.createElement("table");
                cal.appendChild(tab);
                this.thead = document.createElement("thead");
                this.tbody = document.createElement("tbody");
                this.tr = document.createElement("tr");
                this.td = document.createElement("td");
                tab.appendChild(this.thead);
                tab.appendChild(this.tbody);
                this.tHead();
                this.tBody(this.year);
            },
            tHead: function () {
                var weekDays = ["日", "一", "二", "三", "四", "五", "六"];
                var tr = this.tr.cloneNode(true);
                this.thead.appendChild(tr);
                weekDays.forEach(function (item) {
                    var td = this.td.cloneNode(true);
                    td.innerHTML = item;
                    tr.appendChild(td);
                },this)
            },
            tBody: function (year) {
                var monthNum = [31, this.isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][this.month];
                var date = new Date(this.year, this.month, 1);
                var tr = this.tr.cloneNode(true);
                this.tbody.appendChild(tr);
                var td;
                for (var i = 0; i < date.getDay(); i ++) {
                    td = this.td.cloneNode(true);
                    td.innerHTML = "";
                    tr.appendChild(td);
                }

                for (var j = 1; j <= monthNum; j++) {
                    if ((i + j) % 7 === 1) {
                        tr = this.tr.cloneNode(true);
                        this.tbody.appendChild(tr);
                    }
                    td = this.td.cloneNode(true);
                    tr.appendChild(td);
                    td.innerHTML = j;
                    td.style.background = "green";
                    td.style.color = "black";
                    td.style.textAlign = "center";
                    if (j === this.date) {
                        td.style.color = "red";
                    }
                }
            }
        };

        var calendar = new Calendar("calendar");
    </script>
</body>
</html>

　　现在有了这个日历，我们要做的就是当点击输入框的时候怎样把日历显示在下方，这就涉及到偏移量的问题了，就是求出输入框相对于页面可见区域的的位置。

　　求出输入框的横向偏移量代码：

getElementLeft: function (target) {
        var actualLeft = target.offsetLeft;
        var current = target.offsetParent;

        while (current !== null){
            actualLeft += current.offsetLeft;
            current = current.offsetParent;
        }
        return actualLeft;
    }

　　求出输入框的纵向偏移量代码：

getElementTop: function (element){
		var actualTop = element.offsetTop;
		var current = element.offsetParent;

		while (current !== null){
			actualTop += current.offsetTop;
			current = current.offsetParent;
		}
		return actualTop;
	}

其中的offsetLeft是当前元素的左外边框至包含元素的左外边框之间的像素距离，offsetTop是当前元素的上外边框至包含元素的上外边框之间的像素距离，offsetParent是当前元素的包含元素。通过将元素的offsetLeft和offsetTop与包含元素的的相同属性相加，如此循环直到根元素，就求出了元素的左和上的偏移量。当然，也可以通过getBoundindClientRect来获取元素偏移量。

　　得到输入框的偏移量，接下来就好办了，把日历定位在输入框下方的适当位置就可以了，下面定位代码：

var offsetLeft = this.getElementLeft(target);
var offsetTop = this.getElementTop(target);
cal.style.top = offsetTop + 24 + "px";
cal.style.left = offsetLeft + 20 + "px";

　　就到这了，希望这篇文章能帮助到一些朋友。