123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279 |
- //日历PC命名空间
- Namespace.register("U.Boom.A.P.Calen");
- //日历PC 田海涛 陈裕豪 陈卓锐
- //调用函数:U.Boom.A.P.Calen.A()
- //返回参数:divs 日历整体
- U.Boom.A.P.Calen.A = function (input) {
- var DateJson = ['一', '二', '三', '四', '五', '六', '日'];
- //外框
- //var divs = $('<div class="U_Control_calen" style="position:relative;"></div>')[0];
- //var input = $$('div', { 'class': 'U_BP_Cal-input' }, divs);
- divs = input.parentNode;
- var div = $$('div', { 'class': 'U_BP_Cal-div', 'tabindex': '0' }, divs);
- div.style.left = input.offsetLeft + "px";
- div.style.top = (input.offsetTop + input.offsetHeight) + "px";
- div.input = input;
- //input.onfocus = function () { U.Boom.A.P.Calen.A.click(div); }
- div.onblur = function () { $(div).remove(); /**/ }
- div.focus();
- //日历头部
- 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.Boom.A.P.Calen.A.Close(conetY, this, conet, yearText, monthText, conetDB); }
- var yearText = $$('a', { 'class': 'U_BP_Cal-Top-yearText', 'innerHTML': '年份' }, 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.Boom.A.P.Calen.A.Close(conetM, this, conet, yearText, monthText, conetDB); }
- var monthText = $$('a', { 'class': 'U_BP_Cal-Top-monthText', 'innerHTML': '月份' }, 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.Boom.A.P.Calen.A.Ontop, [yearText, monthText, conetDB]] }, tMonths); //'U.Boom.A.P.Calen.A.Ontop()'
- var tMonthRight = $$('div', { 'class': 'U_BP_Cal-triangleRight', 'onclick': [U.Boom.A.P.Calen.A.Onbottom, [yearText, monthText, conetDB]] }, tMonths); //'U.Boom.A.P.Calen.A.Onbottom()'
- //获取今天的信息
- var mydate = U.Boom.A.P.Calen.Date();
- //年份 把元素放在conetY 起始年今年
- U.Boom.A.P.Calen.A.couldY(conetY, mydate['year'] - 5, conetM, conet, yearText);
- //月份
- for (i = 1; i < 13; i++) {
- blockM = $$('div', { 'class': 'U_BP_Cal-blockM', 'innerHTML': i + "月" }, conetM);
- blockM.onclick = function () {
- U.Boom.A.P.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.Boom.A.P.Calen.A.nowMonth(U.Boom.A.P.Calen.Mouth(mydate['year'], mydate['month'], mydate['date'], 7, 5), conetDB, monthText.innerHTML, yearText.innerHTML);
- return div;
- }
- U.Boom.A.P.Calen.A.Default = function (div, html) {
- div.innerHTML = html;
- }
- //点击日历隐藏显示
- U.Boom.A.P.Calen.A.click = function (div) {
- (div.style.display != "block") ? div.style.display = "block" : div.style.display = "none";
- div.focus();
- // div.style.left = input.offsetLeft + "px";
- // div.style.top = (input.offsetTop + input.offsetHeight) + "px";
- }
- //通用 返回:年-月-日 星期 时-分-秒
- U.Boom.A.P.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.Boom.A.P.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.Boom.A.P.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.Boom.A.P.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.Boom.A.P.Calen.A.Open(conetM, this, conet, yearText); //点击之后出现放大动画
- }
- blocks.insertBefore(block, blocks.childNodes[0]); //插入到元素之前
- }
- }
- }
- }
- //放大的动画 传入参数(年/月,获取点击的元素)
- U.Boom.A.P.Calen.A.Open = function (div2, thiss, conet, yearText, monthText, conetDB) {
- //将获取到的ID再去获取元素
- div = thiss.parentNode.parentNode.parentNode.parentNode.getElementsByClassName(conet.i)[0]; //$('.' + U.Boom.A.P.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.Boom.A.P.Calen.A.nowMonth(U.Boom.A.P.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.Boom.A.P.Calen.A.Close = function (div2, thiss, conet, yearText, monthText, conetDB) {
- //将获取到的ID再去获取元素
- div = thiss.parentNode.parentNode.parentNode.parentNode.getElementsByClassName(conet.i)[0]; //$('.' + U.Boom.A.P.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.Boom.A.P.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.Boom.A.P.Calen.A.nowMonth = function (conetDs, conetDB, monthText, yearText) {
- conetDB.innerHTML = ""; //清空日历
- 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";
- month = monthText;
- } else { //上个月或者下个月
- if (firstI == 1) {
- (monthText == 1) ? (yearText = yearText - 1, month = 12) : (month = parseInt(monthText) - 1);
- } else {
- (monthText == 12) ? (yearText = yearText + 1, month = parseInt(monthText)) : (month = parseInt(monthText) + 1);
- }
- }
- blockD.month = month
- blockD.year = yearText;
- //日历的点击事件
- blockD.onclick = function () {
- var thisColor = this.style.color;
- if (thisColor != "rgb(0, 0, 0)") {
- U.alert("此日期不能选择");
- return;
- }
- div = this.parentNode.parentNode.parentNode.parentNode;
- //input = this.parentNode.parentNode.parentNode.parentNode.parentNode.children[0];
- input = div.input;
- // year = parseInt(this.year); //年
- year = $(".U_BP_Cal-Top-yearText")[0].innerHTML;
- 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.value = year + '-' + month + '-' + day; //给input赋值
- div.blur();
- }
- }
- }
- //年份鼠标往上滑动
- U.Boom.A.P.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.Boom.A.P.Calen.A.nowMonth(U.Boom.A.P.Calen.Mouth(yearText, monthText, 1, 7, 5), conetDB, monthText, yearText);
- }
- //年份鼠标往下滑动
- U.Boom.A.P.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.Boom.A.P.Calen.A.nowMonth(U.Boom.A.P.Calen.Mouth(yearText, monthText, 1, 7, 5), conetDB, monthText, yearText);
- }
|