U.O.W.Calendars.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279
  1. //日历PC命名空间
  2. Namespace.register("U.Boom.A.P.Calen");
  3. //日历PC 田海涛 陈裕豪 陈卓锐
  4. //调用函数:U.Boom.A.P.Calen.A()
  5. //返回参数:divs 日历整体
  6. U.Boom.A.P.Calen.A = function (input) {
  7. var DateJson = ['一', '二', '三', '四', '五', '六', '日'];
  8. //外框
  9. //var divs = $('<div class="U_Control_calen" style="position:relative;"></div>')[0];
  10. //var input = $$('div', { 'class': 'U_BP_Cal-input' }, divs);
  11. divs = input.parentNode;
  12. var div = $$('div', { 'class': 'U_BP_Cal-div', 'tabindex': '0' }, divs);
  13. div.style.left = input.offsetLeft + "px";
  14. div.style.top = (input.offsetTop + input.offsetHeight) + "px";
  15. div.input = input;
  16. //input.onfocus = function () { U.Boom.A.P.Calen.A.click(div); }
  17. div.onblur = function () { $(div).remove(); /**/ }
  18. div.focus();
  19. //日历头部
  20. var divTop = $$('div', { 'class': 'U_BP_Cal-Top' }, div);
  21. var TopTitle = $$('div', { 'class': 'U_BP_Cal-Top-Title' }, divTop);
  22. var tYear = $$('div', { 'class': 'U_BP_Cal-Top-tYear' }, TopTitle);
  23. tYear.onclick = function () { U.Boom.A.P.Calen.A.Close(conetY, this, conet, yearText, monthText, conetDB); }
  24. var yearText = $$('a', { 'class': 'U_BP_Cal-Top-yearText', 'innerHTML': '年份' }, tYear);
  25. var yearTitle = $$('a', { 'class': 'U_BP_Cal-Top-yearText', 'innerHTML': '年' }, tYear);
  26. var tMonths = $$('div', { 'class': 'U_BP_Cal-Top-tMonths' }, TopTitle);
  27. var tMonth = $$('div', { 'class': 'U_BP_Cal-Top-tMonth' }, tMonths);
  28. tMonth.onclick = function () { U.Boom.A.P.Calen.A.Close(conetM, this, conet, yearText, monthText, conetDB); }
  29. var monthText = $$('a', { 'class': 'U_BP_Cal-Top-monthText', 'innerHTML': '月份' }, tMonth);
  30. var monthTitle = $$('a', { 'class': 'U_BP_Cal-Top-monthText', 'innerHTML': '月' }, tMonth);
  31. //日历内容
  32. var conet = $$('div', { 'class': 'U_BP_Cal-conet', 'i': 'U_BP_Cal-conetD' }, div);
  33. var conetY = $$('div', { 'class': 'U_BP_Cal-conetY', 'style': { 'cssText': 'display:none;'} }, conet);
  34. var conetM = $$('div', { 'style': { 'cssText': 'display:none' }, 'class': 'U_BP_Cal-conetM' }, conet);
  35. var conetD = $$('div', { 'class': 'U_BP_Cal-conetD', 'style': { 'cssText': 'display:block'} }, conet);
  36. var conetDT = $$('div', { 'class': 'U_BP_Cal-conetDT' }, conetD);
  37. var conetDB = $$('div', { 'class': 'U_BP_Cal-conetDB' }, conetD);
  38. //月份左右切换
  39. 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()'
  40. 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()'
  41. //获取今天的信息
  42. var mydate = U.Boom.A.P.Calen.Date();
  43. //年份 把元素放在conetY 起始年今年
  44. U.Boom.A.P.Calen.A.couldY(conetY, mydate['year'] - 5, conetM, conet, yearText);
  45. //月份
  46. for (i = 1; i < 13; i++) {
  47. blockM = $$('div', { 'class': 'U_BP_Cal-blockM', 'innerHTML': i + "月" }, conetM);
  48. blockM.onclick = function () {
  49. U.Boom.A.P.Calen.A.Open(conetD, this, conet, yearText, monthText, conetDB);
  50. }
  51. }
  52. //日历的星期
  53. for (i = 0; i < 7; i++) {
  54. $$('div', { 'class': 'U_BP_Cal-conetDTT', 'innerHTML': DateJson[i] }, conetDT);
  55. }
  56. yearText.innerHTML = mydate['year']; //今天的年
  57. monthText.innerHTML = mydate['month']; //今天的月
  58. //生成本月的日历
  59. 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);
  60. return div;
  61. }
  62. U.Boom.A.P.Calen.A.Default = function (div, html) {
  63. div.innerHTML = html;
  64. }
  65. //点击日历隐藏显示
  66. U.Boom.A.P.Calen.A.click = function (div) {
  67. (div.style.display != "block") ? div.style.display = "block" : div.style.display = "none";
  68. div.focus();
  69. // div.style.left = input.offsetLeft + "px";
  70. // div.style.top = (input.offsetTop + input.offsetHeight) + "px";
  71. }
  72. //通用 返回:年-月-日 星期 时-分-秒
  73. U.Boom.A.P.Calen.Date = function () {
  74. var myDate = new Date()//获取日期时间
  75. //年月日
  76. var year = myDate.getFullYear();
  77. var month = myDate.getMonth() + 1;
  78. var date = myDate.getDate();
  79. var day = myDate.getDay();
  80. //时分秒
  81. var hours = myDate.getHours();
  82. var minutes = myDate.getMinutes();
  83. var seconds = myDate.getSeconds();
  84. //时与分小于9前面加上0
  85. if (minutes <= 9) minutes = "0" + minutes;
  86. if (seconds <= 9) seconds = "0" + seconds;
  87. //数字转文字
  88. var days = { 0: "日", 1: "一", 2: "二", 3: "三", 4: "四", 5: "五", 6: "六" }
  89. return { "year": year, "month": month, "date": date, "day": days[day], "hours": hours, "minutes": minutes, "seconds": seconds }
  90. }
  91. //生成年(年份整体id,哪一年)
  92. U.Boom.A.P.Calen.A.couldY = function (conetY, nowYear, conetM, conet, yearText) {
  93. //blocks(年月横向)i j定义for循环
  94. var blocks, i, j;
  95. //div清空年月的div
  96. conetY.innerHTML = "";
  97. //for循环生产年份的div
  98. for (i = 0; i < 4; i++) {//竖向四个
  99. blocks = $$('div', { 'class': 'U_BP_Cal-blocks' }, conetY);
  100. for (j = 0; j < 3; j++) {//横向三个
  101. block = $$('div', { 'class': 'U_BP_Cal-block', 'innerHTML': nowYear++ }, blocks);
  102. block.onclick = function () {
  103. U.Boom.A.P.Calen.A.Open(conetM, this, conet, yearText);
  104. }
  105. }
  106. }
  107. //在年份添加鼠标滑动事件 传入DOM的event
  108. var last, year, blocks, block; //定义年
  109. conetY.onmousewheel = function (event) {
  110. event = event || window.event;
  111. if (event.wheelDeltaY == -120) {//向下滚动
  112. last = conetY.firstChild; //年份第一个数
  113. year = parseInt(conetY.lastChild.lastChild.innerHTML); //获取年最后一个数-->转成数字形式
  114. last.parentNode.removeChild(last); //删除年第一个
  115. blocks = $$('div', { 'class': 'U_BP_Cal-blocks' }, conetY); //创建一个年
  116. for (i = 0; i < 3; i++) {//循环出一行连续的年份
  117. year = year + 1; //连续所以++
  118. $$('div', { 'onclick': 'U.Boom.A.P.Calen.conetM,this)', 'class': 'U_BP_Cal-block', 'innerHTML': year }, blocks);
  119. }
  120. }
  121. if (event.wheelDeltaY == 120) {//向上滚动
  122. last = conetY.lastChild; //获取年份最后一个数
  123. year = parseInt(conetY.firstChild.firstChild.innerHTML); //获取年第一个数-->转成数字形式
  124. last.parentNode.removeChild(last); //删除最后一个数
  125. blocks = $('<div class="U_BP_Cal-blocks"></div>')[0]; //创建一个年
  126. conetY.insertBefore(blocks, conetY.childNodes[0]); //插入第一行第一个
  127. for (i = 0; i < 3; i++) {
  128. year = year - 1; //连续所以--
  129. block = $('<div class="U_BP_Cal-block">' + year + '</div>')[0]; //创建一个年
  130. block.onclick = function () {
  131. U.Boom.A.P.Calen.A.Open(conetM, this, conet, yearText); //点击之后出现放大动画
  132. }
  133. blocks.insertBefore(block, blocks.childNodes[0]); //插入到元素之前
  134. }
  135. }
  136. }
  137. }
  138. //放大的动画 传入参数(年/月,获取点击的元素)
  139. U.Boom.A.P.Calen.A.Open = function (div2, thiss, conet, yearText, monthText, conetDB) {
  140. //将获取到的ID再去获取元素
  141. 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.
  142. //判断是年还是月
  143. if (thiss.className == "U_BP_Cal-block") {
  144. yearText.innerHTML = parseInt(thiss.innerHTML);
  145. }
  146. if (thiss.className == "U_BP_Cal-blockM") {
  147. monthText.innerHTML = parseInt(thiss.innerHTML);
  148. 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']
  149. }
  150. conet.i = div2.className;
  151. //动画初始
  152. div.style.cssText += "transition: 0.3s all;transform: scale(1.3);opacity:0;";
  153. //动画开始
  154. setTimeout(function () {
  155. div.style.cssText += "transition: 0s all;transform: scale(1);opacity:1;display:none;";
  156. div2.style.cssText += "transition: 0.2s all;transform: scale(0.6);opacity:0;display:block;";
  157. setTimeout(function () {
  158. div2.style.cssText += "transition: 0.2s all;transform: scale(1);opacity:1;display:block;";
  159. }, 200)
  160. }, 300)
  161. }
  162. //缩小的动画 传入参数(年/月,获取点击的元素)
  163. U.Boom.A.P.Calen.A.Close = function (div2, thiss, conet, yearText, monthText, conetDB) {
  164. //将获取到的ID再去获取元素
  165. 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.
  166. //判断是年还是月
  167. conet.i = div2.className;
  168. //动画初始
  169. div.style.cssText += "transition: 0.3s all;transform: scale(0.8);opacity:0;display:block;";
  170. //动画开始
  171. setTimeout(function () {
  172. div.style.cssText += "transition: 0s all;transform: scale(1);opacity:1;display:none;";
  173. div2.style.cssText += "transition: 0.2s all;transform: scale(0.8);opacity:0;display:block;";
  174. setTimeout(function () {
  175. div2.style.cssText += "transition: 0.2s all;transform: scale(1);opacity:1;display:block;";
  176. }, 150)
  177. }, 300)
  178. }
  179. //获取月下面的日历 参year, month, nowDate, across, line 返回一个数组[1,2,3.....29,30]
  180. U.Boom.A.P.Calen.Mouth = function (year, month, nowDate, across, line) {
  181. var total = across * line;
  182. var oldDate = new Date(year, month - 1, 0).getDate(); //上个月最大天数
  183. var newDate = new Date(year, month, 0).getDate(); //本月最大天数
  184. var week = new Date(year + "/" + month + "/" + 1).getDay(); //本月第一天是星期几
  185. //本页日历第一个数字
  186. var calNum, calInt;
  187. if (week == 0) week = 7;
  188. calNum = 0, calFirst = oldDate - week + 1;
  189. //calNum有三层 上月 本月 下月,将本页第一个数赋给calInt.
  190. calInt = calFirst, myjson = [];
  191. //变量不要定义在for循环里面,定义在函数开始位置,所有变量定义都放在函数开始位置---楚王辉
  192. //一个for循环出一个日历
  193. for (i = 0; i < total; i++) {
  194. if (calNum == 0 && calInt <= oldDate) { //上个月
  195. if (calInt == oldDate) {
  196. calNum++; calInt = 1;
  197. myjson.push(calInt); continue;
  198. } else { calInt++; }
  199. }
  200. if (calNum == 1 && calInt <= newDate) { //本月
  201. if (calInt == newDate) {
  202. calNum++; calInt = 1;
  203. myjson.push(calInt); continue;
  204. } else { calInt++; }
  205. }
  206. if (calNum == 2 && i < total) calInt++ //下个月
  207. myjson.push(calInt);
  208. }
  209. return myjson; //返回一个数组[1,2,3.....29,30]
  210. }
  211. //生成日期 传入参数(日历数组)
  212. U.Boom.A.P.Calen.A.nowMonth = function (conetDs, conetDB, monthText, yearText) {
  213. conetDB.innerHTML = ""; //清空日历
  214. var firstI = 1; //定义第一个数
  215. //循环出一个月的日历
  216. for (i = 0; i < 35; i++) {
  217. blockD = $$('div', { 'class': 'U_BP_Cal-blockD', 'innerHTML': conetDs[i] }, conetDB);
  218. if (conetDs[i] == firstI) { //给本月增加样式(字体黑色)
  219. firstI++;
  220. blockD.style.color = "#000";
  221. month = monthText;
  222. } else { //上个月或者下个月
  223. if (firstI == 1) {
  224. (monthText == 1) ? (yearText = yearText - 1, month = 12) : (month = parseInt(monthText) - 1);
  225. } else {
  226. (monthText == 12) ? (yearText = yearText + 1, month = parseInt(monthText)) : (month = parseInt(monthText) + 1);
  227. }
  228. }
  229. blockD.month = month
  230. blockD.year = yearText;
  231. //日历的点击事件
  232. blockD.onclick = function () {
  233. var thisColor = this.style.color;
  234. if (thisColor != "rgb(0, 0, 0)") {
  235. U.alert("此日期不能选择");
  236. return;
  237. }
  238. div = this.parentNode.parentNode.parentNode.parentNode;
  239. //input = this.parentNode.parentNode.parentNode.parentNode.parentNode.children[0];
  240. input = div.input;
  241. // year = parseInt(this.year); //年
  242. year = $(".U_BP_Cal-Top-yearText")[0].innerHTML;
  243. month = parseInt(this.month);
  244. if (month < 10) month = "0" + month;
  245. day = parseInt(this.innerHTML); //天
  246. if (day < 10) day = "0" + day;
  247. input.innerHTML = year + '-' + month + '-' + day;
  248. input.value = year + '-' + month + '-' + day; //给input赋值
  249. div.blur();
  250. }
  251. }
  252. }
  253. //年份鼠标往上滑动
  254. U.Boom.A.P.Calen.A.Ontop = function (yearText, monthText, conetDB) {
  255. //判断是否为1月
  256. if (monthText.innerHTML == 1) {
  257. yearText = yearText.innerHTML = parseInt(yearText.innerHTML) - 1;
  258. monthText = monthText.innerHTML = 12;
  259. } else {
  260. yearText = parseInt(yearText.innerHTML);
  261. monthText = monthText.innerHTML = monthText.innerHTML - 1;
  262. }
  263. U.Boom.A.P.Calen.A.nowMonth(U.Boom.A.P.Calen.Mouth(yearText, monthText, 1, 7, 5), conetDB, monthText, yearText);
  264. }
  265. //年份鼠标往下滑动
  266. U.Boom.A.P.Calen.A.Onbottom = function (yearText, monthText, conetDB) {
  267. //判断是否为12月
  268. if (monthText.innerHTML == 12) {
  269. yearText = yearText.innerHTML = parseInt(yearText.innerHTML) + 1;
  270. monthText = monthText.innerHTML = 1;
  271. } else {
  272. yearText = parseInt(yearText.innerHTML);
  273. monthText = monthText.innerHTML = parseInt(monthText.innerHTML) + 1;
  274. }
  275. //将值传进去
  276. U.Boom.A.P.Calen.A.nowMonth(U.Boom.A.P.Calen.Mouth(yearText, monthText, 1, 7, 5), conetDB, monthText, yearText);
  277. }