UseStudio.CloudFront/controls/phone/Calendar_mobile/calendar_mobile.js

/*日历控件手机端*/
//郑子民 吴春杰 曾振峰
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();
}