/*日历控件手机端*/ //郑子民 吴春杰 曾振峰 Namespace.register("U.Control.calenm"); //创建一个时间对象 U.Control.calenm.Dateinit = (function () { var date = new Date(); return { getDate: function () { return date; }, setDate: function (date) { this.date = date; } }; })(); //定义需要用到的变量 //触摸滑动记录x y .日期 月份 年份 U.Control.calenm.old_x, U.Control.calenm.old_y, U.Control.calenm.Udate, U.Control.calenm.Umonth; U.Control.calenm.aboveY, U.Control.calenm.movelength, U.Control.calenm.startY; //触摸滑动后上一次的值 触摸滑动后移动的距离 记录div的top值(触摸事件) //加载"设置时间" //调用函数U.Control.calenm.BT 返回"设置时间"的div U.Control.calenm.BT = function () { var CB = $$("div", { "className": "U_CM_confirm" }); $$("div", { "className": "U_CM_confirm_A", "innerHTML": "设置时间" }, CB); $$("div", { "className": "U_CM_confirm_B", "onclick": "U.Control.calenm.GetKJ()" }, CB); return CB; } //页面初始化 U.Control.calenm.init = function () { var U_CM_Box = $$("div", { "className": "U_CM_Box" }, $("body")[0]); var U_CM_YBox = $$("div", { "className": "U_CM_IN" }, U_CM_Box); $$("div", { "className": "U_CM_Year" }, U_CM_YBox); var U_CM_MBox = $$("div", { "className": "U_CM_IN" }, U_CM_Box); $$("div", { "className": "U_CM_Month" }, U_CM_MBox); var U_CM_DBox = $$("div", { "className": "U_CM_IN" }, U_CM_Box); $$("div", { "className": "U_CM_Date" }, U_CM_DBox); var _month = new Array("一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"); var _day = new Array(31, U.Control.calenm.ifrun(U.Control.calenm.Dateinit.getDate().getFullYear()), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); //三个for循环打印年月日 for (var i = 1; i < _day[U.Control.calenm.Dateinit.getDate().getMonth()] + 1; i++) { $$("div", { "className": "U_CM_box", "innerHTML": i }, $(".U_CM_Date")[0]); } for (var i = 0; i < _month.length; i++) { $$("div", { "className": "U_CM_box", "innerHTML": _month[i] }, $(".U_CM_Month")[0]); } for (var i = 0; i < 100; i++) { $$("div", { "className": "U_CM_box", "innerHTML": (U.Control.calenm.Dateinit.getDate().getFullYear() - 50) + i }, $(".U_CM_Year")[0]); } U.Control.calenm.ifnow(_month); //创建按钮及功能 $$("div", { "className": "U_CM_BC" }, U_CM_Box); $$("div", { "className": "U_CM_BCA" }, U_CM_Box); var U_CM_BTN = $$("div", { "className": "U_CM_btn" }, U_CM_Box); $$("div", { "className": "U_CM_Lbtn", "innerHTML": "取消" }, U_CM_BTN); $$("div", { "className": "U_CM_Rbtn", "innerHTML": "确认" }, U_CM_BTN); $(".U_CM_Rbtn").bind("click", function () { $(".U_CM_confirm_B")[0].innerHTML = $(".U_CM_select")[0].innerHTML + "年" + $(".U_CM_select")[1].innerHTML + $(".U_CM_select")[2].innerHTML + "日"; $(".U_CM_Box")[0].remove(); }) $(".U_CM_Lbtn").bind("click", function () { $(".U_CM_Box")[0].remove(); }) } //判断是否为闰年 U.Control.calenm.ifrun = function (a) { if ((a % 4 == 0) && (a % 100 != 0) || (a % 400 == 0)) { return 29; } else return 28; } //判断当前年份确认样式 U.Control.calenm.ifnow = function (a) { var _year = U.Control.calenm.Dateinit.getDate().getFullYear(); var _month = U.Control.calenm.Dateinit.getDate().getMonth(); var _day = U.Control.calenm.Dateinit.getDate().getDate(); //获取当前年月日并从控件中找到相应日期 赋予样式 for (var i = 0; i < $(".U_CM_Date div").length; i++) { if (_day == $(".U_CM_Date div")[i].innerHTML) { $(".U_CM_Date div")[i].className += " U_CM_select"; $(".U_CM_Date")[0].style.top = "-" + $(".U_CM_Date div")[i - 3].offsetTop + "px"; } } for (var i = 0; i < $(".U_CM_Month div").length; i++) { if (a[_month] == $(".U_CM_Month div")[i].innerHTML) { $(".U_CM_Month div")[i].className += " U_CM_select"; $(".U_CM_Month")[0].style.top = "-" + $(".U_CM_Month div")[i - 3].offsetTop + "px"; } } for (var i = 0; i < $(".U_CM_Year div").length; i++) { if (_year == $(".U_CM_Year div")[i].innerHTML) { $(".U_CM_Year div")[i].className += " U_CM_select"; $(".U_CM_Year")[0].style.top = "-" + $(".U_CM_Year div")[i - 3].offsetTop + "px"; } } } //日历上下滑动功能 U.Control.calenm.touch = function () { var UY = $(".U_CM_Year")[0]; var UM = $(".U_CM_Month")[0]; var UD = $(".U_CM_Date")[0]; $(".U_CM_Box").bind("touchstart", function (e) { U.UF.EV.stopBubble(); //获取所需值 跟清空属性 U.Control.calenm.old_x = e.touches[0].pageX; U.Control.calenm.old_y = e.touches[0].pageY; switch (e.target.parentNode) { case UY: U.Control.calenm.aboveY = UY.offsetTop; UY.style.transition = ""; break; case UM: U.Control.calenm.aboveY = UM.offsetTop; UM.style.transition = ""; break; case UD: U.Control.calenm.aboveY = UD.offsetTop; UD.style.transition = ""; break; default: break; } }, false) $(".U_CM_Box").bind("touchmove", function (e) { U.UF.EV.stopBubble(); //触摸滑动时改变外部div的坐标 switch (e.target.parentNode) { //将样式一致 再计算移动的距离 (年月日) case UY: for (var i = 0; i < UY.children.length; i++) { UY.children[i].className = "U_CM_box" } U.Control.calenm.movelength = e.touches[0].pageY - U.Control.calenm.old_y; UY.style.top = parseInt(U.Control.calenm.aboveY + U.Control.calenm.movelength) + "px"; U.Control.calenm.startY = UY.style.top; break; case UM: for (var i = 0; i < UM.children.length; i++) { UM.children[i].className = "U_CM_box" } U.Control.calenm.movelength = e.touches[0].pageY - U.Control.calenm.old_y; UM.style.top = parseInt(U.Control.calenm.aboveY + U.Control.calenm.movelength) + "px"; U.Control.calenm.startY = UM.style.top; break; case UD: for (var i = 0; i < UD.children.length; i++) { UD.children[i].className = "U_CM_box" } U.Control.calenm.movelength = e.touches[0].pageY - U.Control.calenm.old_y; UD.style.top = parseInt(U.Control.calenm.aboveY + U.Control.calenm.movelength) + "px"; U.Control.calenm.startY = UD.style.top; break; default: break; } }, false) $(".U_CM_Box").bind("touchend", function (e) { U.UF.EV.stopBubble(); if (e.target != $(".U_CM_IN")[0] && e.target != $(".U_CM_IN")[1] && e.target != $(".U_CM_IN")[1]) { U.Control.calenm.aboveY = $(".U_CM_select")[0].offsetTop; //触摸结束后判断当前焦点的是哪个div (年月日) switch (e.target.parentNode) { //判断滑动的距离是否满足更换焦点要求否则弹回触摸时的div (年月日) case UY: U.Control.calenm.Udate = $(".U_CM_select")[1].innerHTML; U.Control.calenm.Umonth = $(".U_CM_select")[0].innerHTML; if (parseInt(U.Control.calenm.startY) > 185) { e.target.parentNode.firstChild.className += " U_CM_select"; e.target.parentNode.style.cssText += "transition:0.5s all;"; e.target.parentNode.style.top = 120 + "px"; } for (var i = 0; i < UY.children.length; i++) { if (parseInt(U.Control.calenm.startY) >= 80 - i * 40 && parseInt(U.Control.calenm.startY) < 120 - i * 40) { e.target.parentNode.children[i].className += " U_CM_select"; UY.style.top = 120 - i * 40 + "px"; e.target.parentNode.style.cssText += "transition:0.5s all;"; } } if (parseInt(U.Control.calenm.startY) < -3838) { e.target.parentNode.lastChild.className += " U_CM_select"; e.target.parentNode.style.cssText += "transition:0.5s all;"; e.target.parentNode.style.top = -3838 + "px"; } U.Control.calenm.UPdata($(".U_CM_select")[0].innerHTML, "0"); break; case UM: U.Control.calenm.Udate = $(".U_CM_select")[1].innerHTML; if (parseInt(U.Control.calenm.startY) > 120) { e.target.parentNode.firstChild.className += " U_CM_select"; e.target.parentNode.style.cssText += "transition:0.5s all;"; e.target.parentNode.style.top = 120 + "px"; } for (var i = 0; i < UM.children.length; i++) { if (parseInt(U.Control.calenm.startY) >= 80 - i * 40 && parseInt(U.Control.calenm.startY) < 120 - i * 40) { e.target.parentNode.children[i].className += " U_CM_select"; UM.style.top = 120 - i * 40 + "px"; e.target.parentNode.style.cssText += "transition:0.5s all;"; } } if (parseInt(U.Control.calenm.startY) < -319) { e.target.parentNode.lastChild.className += " U_CM_select"; e.target.parentNode.style.cssText += "transition:0.5s all;"; e.target.parentNode.style.top = -319 + "px"; } U.Control.calenm.UPdata($(".U_CM_select")[1].innerHTML, "1"); break; case UD: var YY = 1125; if (UD.children.length == 30) { YY = 1170; } else if (UD.children.length == 28) { YY = 1080 } else if (UD.children.length == 31) { YY = 1078 }; if (parseInt(U.Control.calenm.startY) > 120) { e.target.parentNode.firstChild.className += " U_CM_select"; e.target.parentNode.style.cssText += "transition:0.5s all;"; e.target.parentNode.style.top = 120 + "px"; } for (var i = 0; i < UD.children.length; i++) { if (parseInt(U.Control.calenm.startY) >= 80 - i * 40 && parseInt(U.Control.calenm.startY) < 120 - i * 40) { e.target.parentNode.children[i].className += " U_CM_select"; UD.style.top = 120 - i * 40 + "px"; e.target.parentNode.style.cssText += "transition:0.5s all;"; } } if (parseInt(U.Control.calenm.startY) < -YY) { e.target.parentNode.lastChild.className += " U_CM_select"; e.target.parentNode.style.cssText += "transition:0.5s all;"; e.target.parentNode.style.top = -YY + "px"; } break; default: break; } }; }, false) } //当换了月份后 更新日期 a蓝色div的innerHTML b= 0 或者1 1表示日期做了拖动 0表示月份做了拖动 U.Control.calenm.UPdata = function (a, b) { var UD = $(".U_CM_Date")[0]; var dataa; var _month = new Array("一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"); var _day = new Array(31, U.Control.calenm.ifrun(U.Control.calenm.Dateinit.getDate().getFullYear()), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); if (b == 1) { UD.innerHTML = ''; for (var i = 0; i < 12; i++) { if (a == _month[i]) { dataa = i; for (var j = 1; j < _day[i] + 1; j++) { $$("div", { "className": "U_CM_box", "innerHTML": j }, UD); } } } //判断日期那一列的焦点div for (var i = 0; i < $(".U_CM_Date div").length; i++) { if (U.Control.calenm.Udate == $(".U_CM_Date div")[i].innerHTML) { $(".U_CM_Date div")[i].className += " U_CM_select"; UD.style.top = "-" + $(".U_CM_Date div")[i - 3].offsetTop + "px"; break; } else if (_month[dataa] == "二月" && U.Control.calenm.Udate == 31 || _month[dataa] == "二月" && U.Control.calenm.Udate == 30) { if (UD.lastChild.innerHTML == "29") { UD.lastChild.className += " U_CM_select"; UD.style.top = "-" + $(".U_CM_Date div")[28 - 3].offsetTop + "px"; break; } UD.lastChild.className += " U_CM_select"; UD.style.top = "-" + $(".U_CM_Date div")[29 - 3].offsetTop + "px"; break; } if (_month[dataa] == "二月" && (UD.lastChild.innerHTML == "31" || UD.lastChild.innerHTML == "30")) { UD.lastChild.className += " U_CM_select"; UD.style.top = "-" + $(".U_CM_Date div")[28 - 3].offsetTop + "px"; } else if (U.Control.calenm.Udate == "31") { UD.lastChild.className += " U_CM_select"; UD.style.top = "-" + $(".U_CM_Date div")[29 - 3].offsetTop + "px"; } } } else { //判断月份那一列的焦点div for (var i = 0; i < $(".U_CM_Month div").length; i++) { if (U.Control.calenm.Umonth == "二月") { var Ua = U.Control.calenm.ifrun($(".U_CM_select")[0].innerHTML); if (Ua == 28) { UD.innerHTML = ''; for (var i = 1; i < 28 + 1; i++) { $$("div", { "className": "U_CM_box", "innerHTML": i }, UD); } UD.lastChild.className += " U_CM_select"; UD.style.top = "-" + $(".U_CM_Date div")[27 - 3].offsetTop + "px"; } else { UD.innerHTML = ''; for (var i = 1; i < 29 + 1; i++) { $$("div", { "className": "U_CM_box", "innerHTML": i }, UD); } UD.lastChild.className += " U_CM_select"; UD.style.top = "-" + $(".U_CM_Date div")[28 - 3].offsetTop + "px"; } } } } } //回调函数 U.Control.calenm.GetKJ = function () { if ($(".U_CM_Box")[0]) { return } U.Control.calenm.init(); U.Control.calenm.touch(); }