//日历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);
}