From f568b94429de4ff1903abeb1f881bbf331a673da Mon Sep 17 00:00:00 2001 From: wlh Date: Tue, 12 Aug 2014 20:13:18 +0800 Subject: [PATCH] add ui --- ui/calendar.html | 18 ++++ ui/calendar.js | 221 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 239 insertions(+) create mode 100644 ui/calendar.html create mode 100644 ui/calendar.js diff --git a/ui/calendar.html b/ui/calendar.html new file mode 100644 index 0000000..bc3fb12 --- /dev/null +++ b/ui/calendar.html @@ -0,0 +1,18 @@ + + + + + + + + +
+ + \ No newline at end of file diff --git a/ui/calendar.js b/ui/calendar.js new file mode 100644 index 0000000..380e5b6 --- /dev/null +++ b/ui/calendar.js @@ -0,0 +1,221 @@ +/* ++------------------------------ +@author:vczero +@time:2014/8/10 +@desc:简易日历组件 ++------------------------------ +*/ +var Calendar = (function(){ + var Calendar = function(div, date){ + this.div = document.getElementById(div); + var w = this.div.style.width || 390; + var h = this.div.style.height || (300 - 30); + this.width = parseInt(w) >= 360 ? w : 360; + this.height = parseInt(h) >= 180 ? h : 180; + this.date = date; + this.div.style.width = this.width + 'px'; //按默认值设置回去 + this.div.style.height = this.height + 'px';//按默认值设置回去 + }; + + Calendar.week = ['星期一', '星期二','星期三', '星期四','星期五', '星期六', '星期日']; + + Calendar.prototype['showUI'] = function(callback){ + var exist = document.getElementById('vczero_celldom_0'); + //如果存在节点：移除 + if(!!exist){ + for(var e = 0; e < 35; e++){ + var node = document.getElementById('vczero_celldom_' + e); + node.onclick = null; //移除事件处理程序 + this.div.removeChild(node); + } + } + + var width = this.width, + height = this.height, + cell = {width: (parseInt(width) - 20)/7, height: (parseInt(height) -30 - 20)/5}, + monthArr = this._monthPanel(this.date); + this.div.style.paddingLeft = '8px'; + this.div.style.border = '2px solid #57ABFF'; + this.div.style.cursor = 'default'; + this.div.style.fontFamily = '微软雅黑'; + this._addHeader(); + this._addWeekday(); + + for(var i = 0; i < 35; i++){ + var cellDOM = document.createElement('div'); + cellDOM.style.width = cell.width + 'px'; + cellDOM.style.height = cell.height + 'px'; + cellDOM.style.display = 'inline-block'; + cellDOM.style.cssFloat = 'left'; + cellDOM.style.cursor = 'pointer'; + cellDOM.style.textAlign = 'center'; + cellDOM.id = 'vczero_celldom_' + i; + cellDOM.style.lineHeight = cell.height + 'px'; + cellDOM.setAttribute('date',monthArr.date[i]); //设置日期对象到DOM属性date上 + cellDOM.innerHTML = monthArr.date[i].getDate(); + //去掉最后一行横线 + if(i < 28){ + cellDOM.style.borderBottom = '1px solid #C8CACC'; + } + + if(i < monthArr.preLen || i >= monthArr.currentLen + monthArr.preLen){ + cellDOM.style.color = '#BFBFBF'; + } + this.div.appendChild(cellDOM); + } + + var _that = this; + //使用父元素事件委托 + this.div.addEventListener('click',function(e){ + var node = e.target; + if(node.id.indexOf('vczero_celldom_') > -1){ + var date = new Date(node.getAttribute('date')).toLocaleString(); + callback(date); + } + }); + }; + + Calendar.prototype._addHeader = function(){ + var exist = document.getElementById('vczero_datediv'); + if(!!exist){ + exist.onclick = null; + this.div.removeChild(exist); + } + + var header = document.createElement('div'); + header.style.height = '22px'; + header.style.width = this.div.style.width || '800px'; + + //包含左 时间 右的大DIV + var dateDiv = document.createElement('div'); + dateDiv.style.width = '200px'; + dateDiv.style.height = '22px'; + dateDiv.style.margin = '0 auto'; + dateDiv.style.textAlign = 'center'; + dateDiv.style.fontWeight = 'bold'; + dateDiv.id = 'vczero_datediv' + + //< DIV + var leftDiv = document.createElement('div'); + leftDiv.innerHTML = '<'; + leftDiv.style.display = 'inline-block'; + leftDiv.style.float = 'left'; + leftDiv.style.width = '50px'; + leftDiv.style.cursor = 'pointer'; + leftDiv.style.color = '#C5BFBF'; + var _that = this; //获取到this对象 + leftDiv.addEventListener('click', function(event){ + var year = parseInt(_that.date.getFullYear()), + month = parseInt(_that.date.getMonth()); + if(month === 0){ + _that.date = new Date(year - 1, 11, 1); + }else{ + _that.date = new Date(year, month - 1, 1); + } + _that['showUI'](function(){}); + + }); + + //> DIV + var rightDiv = document.createElement('div'); + rightDiv.innerHTML = '>'; + rightDiv.style.display = 'inline-block'; + rightDiv.style.float = 'left'; + rightDiv.style.width = '50px'; + rightDiv.style.cursor = 'pointer'; + rightDiv.style.color = '#C5BFBF'; + rightDiv.addEventListener('click', function(event){ + var year = parseInt(_that.date.getFullYear()), + month = parseInt(_that.date.getMonth()); + if(month === 11){ + _that.date = new Date(year + 1, 0, 1); + }else{ + _that.date = new Date(year, month + 1, 1); + } + _that['showUI'](function(){}); + }); + + + //显示月份的DIV + var timeDiv = document.createElement('div'); + timeDiv.style.display = 'inline-block'; + timeDiv.style.float = 'left'; + timeDiv.style.width = '100px'; + timeDiv.innerHTML = this.date.getFullYear() + '年' + (this.date.getMonth() + 1) + '月'; + + dateDiv.appendChild(leftDiv); + dateDiv.appendChild(timeDiv); + dateDiv.appendChild(rightDiv); + this.div.appendChild(dateDiv); + } + + //增加星期 + Calendar.prototype._addWeekday = function(){ + var exist = document.getElementById('vczero_week_0'); + if(!!exist){ + for(var i = 0; i < 7; i++){ + var node = document.getElementById('vczero_week_' + i); + node.onclick = null; + this.div.removeChild(node); + } + + } + + for(var i = 0; i < 7; i++){ + var weekday = document.createElement('div'); + weekday.style.width = (parseInt(this.width) - 20)/7 + 'px'; + weekday.style.height = '20px'; + weekday.style.display = 'inline-block'; + weekday.style.float = 'left'; + weekday.style.color = '#BFBFBF'; + weekday.style.fontWeight = 'bold'; + weekday.style.textAlign = 'center'; + weekday.id = 'vczero_week_' + i; + weekday.innerHTML = Calendar.week[i]; + this.div.appendChild(weekday); + } + } + + Calendar.prototype._monthPanel = function(date){ + //如果传递了Date对象，则按Date对象进行计算月份面板 + //否则，按照当前月份计算面板 + var date = date || new Date(), + year = date.getFullYear(), + month = date.getMonth(), + day = date.getDate(), + week = date.getDay(), + currentDays = new Date(year, month + 1, 0).getDate(), + preDays = new Date(year, month, 0).getDate(), + firstDay = new Date(year, month, 1), + firstCell = firstDay.getDay() === 0 ? 6 : firstDay.getDay() - 1, + bottomCell = 35 - currentDays - firstCell; + //前一个月该显示多少天 + var preMonth = []; + for(var p = firstCell; p > 0; p--){ + preMonth.push(new Date(year, month - 1, preDays - p + 1)); + } + var len = preMonth.length; + //本月 + var currentMonth = []; + for(var c = 0; c < currentDays; c++){ + currentMonth.push(new Date(year, month, c + 1)); + } + //下一个月 + var nextMonth = []; + for(var n = 0; n < bottomCell; n++){ + nextMonth.push(new Date(year, month + 1, n + 1)); + } + + preMonth = preMonth.concat(currentMonth, nextMonth); + return { + date: preMonth, + preLen: len, + currentLen: currentMonth.length + }; + }; + + return Calendar; + +})(); + +