//日历PC命名空间 Namespace.register("U.Control.calen"); //日历PC 田海涛 陈裕豪 陈卓锐 //调用函数:U.Control.calen.A() //返回参数:divs 日历整体 U.Control.calen.A = function () { var DateJson = ['一', '二', '三', '四', '五', '六', '日']; //外框 var divs = $('
')[0]; var input = $$('div', { 'class': 'U_BP_Cal-input' }, divs); var div = $$('div', { 'class': 'U_BP_Cal-div' }, divs); input.onclick = function () { U.Control.calen.A.click(div) } //日历头部 var divTop = $$('div', { 'class': 'U_BP_Cal-Top' }, div); var TopTitle = $$('div', { 'class': 'U_BP_Cal-Top-Title' }, divTop); var tYear = $$('div', { 'class': 'U_BP_Cal-Top-tYear' }, TopTitle); tYear.onclick = function () { U.Control.calen.A.Close(conetY, this, conet, yearText, monthText, conetDB); } var yearText = $$('a', { 'class': 'U_BP_Cal-Top-yearText', 'innerHTML': '2016' }, tYear); var yearTitle = $$('a', { 'class': 'U_BP_Cal-Top-yearText', 'innerHTML': '年' }, tYear); var tMonths = $$('div', { 'class': 'U_BP_Cal-Top-tMonths' }, TopTitle); var tMonth = $$('div', { 'class': 'U_BP_Cal-Top-tMonth' }, tMonths); tMonth.onclick = function () { U.Control.calen.A.Close(conetM, this, conet, yearText, monthText, conetDB); } var monthText = $$('a', { 'class': 'U_BP_Cal-Top-monthText', 'innerHTML': '9' }, tMonth); var monthTitle = $$('a', { 'class': 'U_BP_Cal-Top-monthText', 'innerHTML': '月' }, tMonth); //日历内容 var conet = $$('div', { 'class': 'U_BP_Cal-conet', 'i': 'U_BP_Cal-conetD' }, div); var conetY = $$('div', { 'class': 'U_BP_Cal-conetY', 'style': { 'cssText': 'display:none;'} }, conet); var conetM = $$('div', { 'style': { 'cssText': 'display:none' }, 'class': 'U_BP_Cal-conetM' }, conet); var conetD = $$('div', { 'class': 'U_BP_Cal-conetD', 'style': { 'cssText': 'display:block'} }, conet); var conetDT = $$('div', { 'class': 'U_BP_Cal-conetDT' }, conetD); var conetDB = $$('div', { 'class': 'U_BP_Cal-conetDB' }, conetD); //月份左右切换 var tMonthLeft = $$('div', { 'class': 'U_BP_Cal-triangleLeft', 'onclick': [U.Control.calen.A.Ontop, ([yearText, monthText, conetDB])] }, tMonths); //'U.Control.calen.A.Ontop()' var tMonthRight = $$('div', { 'class': 'U_BP_Cal-triangleRight', 'onclick': [U.Control.calen.A.Onbottom, ([yearText, monthText, conetDB])] }, tMonths); //'U.Control.calen.A.Onbottom()' //获取今天的信息 var mydate = U.Control.calen.Date(); //年份 把元素放在conetY 起始年今年 U.Control.calen.A.couldY(conetY, mydate['year'], conetM, conet, yearText); //月份 for (i = 1; i < 13; i++) { blockM = $$('div', { 'class': 'U_BP_Cal-blockM', 'innerHTML': i + "月" }, conetM); blockM.onclick = function () { U.Control.calen.A.Open(conetD, this, conet, yearText, monthText, conetDB); } } //日历的星期 for (i = 0; i < 7; i++) { $$('div', { 'class': 'U_BP_Cal-conetDTT', 'innerHTML': DateJson[i] }, conetDT); } yearText.innerHTML = mydate['year']; //今天的年 monthText.innerHTML = mydate['month']; //今天的月 //生成本月的日历 U.Control.calen.A.nowMonth(U.Control.calen.Mouth(mydate['year'], mydate['month'], mydate['date'], 7, 5), conetDB, monthText.innerHTML, yearText.innerHTML); return divs; } //点击日历隐藏显示 U.Control.calen.A.click = function (div) { (div.style.display != "block") ? div.style.display = "block" : div.style.display = "none"; } //通用 返回:年-月-日 星期 时-分-秒 U.Control.calen.Date = function () { var myDate = new Date()//获取日期时间 //年月日 var year = myDate.getFullYear(); var month = myDate.getMonth() + 1; var date = myDate.getDate(); var day = myDate.getDay(); //时分秒 var hours = myDate.getHours(); var minutes = myDate.getMinutes(); var seconds = myDate.getSeconds(); //时与分小于9前面加上0 if (minutes <= 9) minutes = "0" + minutes; if (seconds <= 9) seconds = "0" + seconds; //数字转文字 var days = { 0: "日", 1: "一", 2: "二", 3: "三", 4: "四", 5: "五", 6: "六" } return { "year": year, "month": month, "date": date, "day": days[day], "hours": hours, "minutes": minutes, "seconds": seconds } } //生成年(年份整体id,哪一年) U.Control.calen.A.couldY = function (conetY, nowYear, conetM, conet,yearText) { //blocks(年月横向)i j定义for循环 var blocks, i, j; //div清空年月的div conetY.innerHTML = ""; //for循环生产年份的div for (i = 0; i < 4; i++) {//竖向四个 blocks = $$('div', { 'class': 'U_BP_Cal-blocks' }, conetY); for (j = 0; j < 3; j++) {//横向三个 block = $$('div', { 'class': 'U_BP_Cal-block', 'innerHTML': nowYear++ }, blocks); block.onclick = function () { U.Control.calen.A.Open(conetM, this, conet, yearText); } } } //在年份添加鼠标滑动事件 传入DOM的event var last, year, blocks, block; //定义年 conetY.onmousewheel = function (event) { event = event || window.event; if (event.wheelDeltaY == -120) {//向下滚动 last = conetY.firstChild; //年份第一个数 year = parseInt(conetY.lastChild.lastChild.innerHTML); //获取年最后一个数-->转成数字形式 last.parentNode.removeChild(last); //删除年第一个 blocks = $$('div', { 'class': 'U_BP_Cal-blocks' }, conetY); //创建一个年 for (i = 0; i < 3; i++) {//循环出一行连续的年份 year = year + 1; //连续所以++ $$('div', { 'onclick': 'U.Control.calen.conetM,this)', 'class': 'U_BP_Cal-block', 'innerHTML': year }, blocks); } } if (event.wheelDeltaY == 120) {//向上滚动 last = conetY.lastChild; //获取年份最后一个数 year = parseInt(conetY.firstChild.firstChild.innerHTML); //获取年第一个数-->转成数字形式 last.parentNode.removeChild(last); //删除最后一个数 blocks = $('
')[0]; //创建一个年 conetY.insertBefore(blocks, conetY.childNodes[0]); //插入第一行第一个 for (i = 0; i < 3; i++) { year = year - 1; //连续所以-- block = $('
' + year + '
')[0]; //创建一个年 block.onclick = function () { U.Control.calen.A.Open(conetM, this, conet, yearText); //点击之后出现放大动画 } blocks.insertBefore(block, blocks.childNodes[0]); //插入到元素之前 } } } } //放大的动画 传入参数(年/月,获取点击的元素) U.Control.calen.A.Open = function (div2, thiss, conet, yearText, monthText, conetDB) { //将获取到的ID再去获取元素 div = thiss.parentNode.parentNode.parentNode.parentNode.getElementsByClassName(conet.i)[0]; //$('.' + U.Control.calen.conet.i)[0]; //document.getElementById("UCD_CT_SM_IF").contentWindow. //判断是年还是月 if (thiss.className == "U_BP_Cal-block") { yearText.innerHTML = parseInt(thiss.innerHTML); } if (thiss.className == "U_BP_Cal-blockM") { monthText.innerHTML = parseInt(thiss.innerHTML); U.Control.calen.A.nowMonth(U.Control.calen.Mouth(yearText.innerHTML, parseInt(thiss.innerHTML), 1, 7, 5), conetDB, monthText.innerHTML, yearText.innerHTML); //mydate['date'] } conet.i = div2.className; //动画初始 div.style.cssText += "transition: 0.3s all;transform: scale(1.3);opacity:0;"; //动画开始 setTimeout(function () { div.style.cssText += "transition: 0s all;transform: scale(1);opacity:1;display:none;"; div2.style.cssText += "transition: 0.2s all;transform: scale(0.6);opacity:0;display:block;"; setTimeout(function () { div2.style.cssText += "transition: 0.2s all;transform: scale(1);opacity:1;display:block;"; }, 200) }, 300) } //缩小的动画 传入参数(年/月,获取点击的元素) U.Control.calen.A.Close = function (div2, thiss, conet, yearText, monthText, conetDB) { //将获取到的ID再去获取元素 div = thiss.parentNode.parentNode.parentNode.parentNode.getElementsByClassName(conet.i)[0]; //$('.' + U.Control.calen.conet.i)[0]; //document.getElementById("UCD_CT_SM_IF").contentWindow. //判断是年还是月 conet.i = div2.className; //动画初始 div.style.cssText += "transition: 0.3s all;transform: scale(0.8);opacity:0;display:block;"; //动画开始 setTimeout(function () { div.style.cssText += "transition: 0s all;transform: scale(1);opacity:1;display:none;"; div2.style.cssText += "transition: 0.2s all;transform: scale(0.8);opacity:0;display:block;"; setTimeout(function () { div2.style.cssText += "transition: 0.2s all;transform: scale(1);opacity:1;display:block;"; }, 150) }, 300) } //获取月下面的日历 参year, month, nowDate, across, line 返回一个数组[1,2,3.....29,30] U.Control.calen.Mouth = function (year, month, nowDate, across, line) { var total = across * line; var oldDate = new Date(year, month - 1, 0).getDate(); //上个月最大天数 var newDate = new Date(year, month, 0).getDate(); //本月最大天数 var week = new Date(year + "/" + month + "/" + 1).getDay(); //本月第一天是星期几 //本页日历第一个数字 var calNum, calInt; if (week == 0) week = 7; calNum = 0, calFirst = oldDate - week + 1; //calNum有三层 上月 本月 下月,将本页第一个数赋给calInt. calInt = calFirst, myjson = []; //变量不要定义在for循环里面,定义在函数开始位置,所有变量定义都放在函数开始位置---楚王辉 //一个for循环出一个日历 for (i = 0; i < total; i++) { if (calNum == 0 && calInt <= oldDate) { //上个月 if (calInt == oldDate) { calNum++; calInt = 1; myjson.push(calInt); continue; } else { calInt++; } } if (calNum == 1 && calInt <= newDate) { //本月 if (calInt == newDate) { calNum++; calInt = 1; myjson.push(calInt); continue; } else { calInt++; } } if (calNum == 2 && i < total) calInt++ //下个月 myjson.push(calInt); } return myjson; //返回一个数组[1,2,3.....29,30] } //生成日期 传入参数(日历数组) U.Control.calen.A.nowMonth = function (conetDs, conetDB, monthText, yearText) { conetDB.innerHTML = ""; //清空日历 //monthText = U.Control.calen.monthText; var firstI = 1; //定义第一个数 //循环出一个月的日历 for (i = 0; i < 35; i++) { blockD = $$('div', { 'class': 'U_BP_Cal-blockD', 'innerHTML': conetDs[i] }, conetDB); if (conetDs[i] == firstI) { //给本月增加样式(字体黑色) firstI++; blockD.style.color = "#000"; blockD.year = yearText; //parseInt(yearText.innerHTML); blockD.month = monthText; //parseInt(monthText.innerHTML); } else { //上个月或者下个月 if (firstI == 1) { blockD.month = monthText - 1; //parseInt(monthText.innerHTML) - 1; } else { blockD.month = monthText + 1; //parseInt(monthText.innerHTML) + 1; } } //日历的点击事件 blockD.onclick = function () { div = this.parentNode.parentNode.parentNode.parentNode; input = this.parentNode.parentNode.parentNode.parentNode.parentNode.children[0]; year = parseInt(this.year); //年 month = parseInt(this.month); if (month < 10) month = "0" + month; day = parseInt(this.innerHTML); //天 if (day < 10) day = "0" + day; input.innerHTML = year + '-' + month + '-' + day; //给input赋值 div.style.display = "none"; //隐藏控件 } } } //年份鼠标往上滑动 U.Control.calen.A.Ontop = function (yearText, monthText, conetDB) { //判断是否为1月 if (monthText.innerHTML == 1) { yearText = yearText.innerHTML = parseInt(yearText.innerHTML) - 1; monthText = monthText.innerHTML = 12; } else { yearText = parseInt(yearText.innerHTML); monthText = monthText.innerHTML = monthText.innerHTML - 1; } U.Control.calen.A.nowMonth(U.Control.calen.Mouth(yearText, monthText, 1, 7, 5), conetDB, monthText, yearText); } //年份鼠标往下滑动 U.Control.calen.A.Onbottom = function (yearText, monthText, conetDB) { //判断是否为12月 if (monthText.innerHTML == 12) { yearText = yearText.innerHTML = parseInt(yearText.innerHTML) + 1; monthText = monthText.innerHTML = 1; } else { yearText = parseInt(yearText.innerHTML); monthText = monthText.innerHTML = parseInt(monthText.innerHTML) + 1; } //将值传进去 U.Control.calen.A.nowMonth(U.Control.calen.Mouth(yearText, monthText, 1, 7, 5), conetDB, monthText, yearText); }