今天这篇要写的东西其实和上一篇文章是同一个任务中的。就是在输入框中输入时间段,然后从数据库中获取这个时间段的所有数据,下面是效果图:
点击日历上的日期,输入框中就会显示选择的日期。
要想实现这个效果,首先得有一个日历,刚好之前有写过一个简单的日历插件,所以就派上用场了。下面是日历的代码:
<!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";
就到这了,希望这篇文章能帮助到一些朋友。