UseStudio.CloudFront/controls/pc/calendar/calendar.js

//日历PC命名空间
Namespace.register("U.Control.calen");
//日历PC 田海涛 陈裕豪 陈卓锐
//调用函数：U.Control.calen.A()
//返回参数：divs 日历整体
U.Control.calen.A = function () {
    var DateJson = ['一', '二', '三', '四', '五', '六', '日'];
    //外框
    var divs = $('<div class="U_Control_calen" style="position:relative;"></div>')[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 = $('<div class="U_BP_Cal-blocks"></div>')[0]; //创建一个年
            conetY.insertBefore(blocks, conetY.childNodes[0]); //插入第一行第一个

            for (i = 0; i < 3; i++) {
                year = year - 1; //连续所以--
                block = $('<div class="U_BP_Cal-block">' + year + '</div>')[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);
}