Calendar.js 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535
  1. Namespace.register("U.MD.UI.calendar");
  2. /**
  3. * 日历控件调用API函数
  4. * @param el 对象元素
  5. * @param parentnode 添加到的父元素
  6. * @param datetimeboolean 【boolean】是否显示选择时分秒功能
  7. */
  8. U.MD.UI.Calendar = U.MD.UI.calendar = function (el, parentnode, datetimeboolean) {
  9. if (!el)
  10. return
  11. if(typeof datetimeboolean == 'boolean' && datetimeboolean == false){
  12. U.MD.UI.calendar.datetimeformat = datetimeboolean
  13. }else{
  14. U.MD.UI.calendar.datetimeformat = true;
  15. }
  16. U.MD.UI.calendar.create(el, parentnode);
  17. }
  18. U.MD.UI.calendar.NOW = new Date(); /*获取当天时间*/
  19. U.MD.UI.calendar.CURRENTYEAR = U.MD.UI.calendar.NOW.getFullYear(); /*今年*/
  20. U.MD.UI.calendar.CURRENTMONTH = U.MD.UI.calendar.NOW.getMonth(); /*今月*/
  21. U.MD.UI.calendar.CURRENTDAY = U.MD.UI.calendar.NOW.getDate(); /*今日*/
  22. U.MD.UI.calendar.year = U.MD.UI.calendar.CURRENTYEAR; /*可变年*/
  23. U.MD.UI.calendar.month = U.MD.UI.calendar.CURRENTMONTH; /*可变月*/
  24. U.MD.UI.calendar.day = U.MD.UI.calendar.CURRENTDAY; /*可变日*/
  25. U.MD.UI.calendar.hour = '00'; /*时*/
  26. U.MD.UI.calendar.minute = '00'; /*分*/
  27. U.MD.UI.calendar.second = '00'; /*秒*/
  28. U.MD.UI.calendar.datetimeformat = true; /*是否以时分秒时间格式输出*/
  29. U.MD.UI.calendar.fouseinp = null; /*当前聚焦的input*/
  30. U.MD.UI.calendar.board = null; /*最外层div*/
  31. U.MD.UI.calendar.tit = null; /*日期标题*/
  32. U.MD.UI.calendar.mark = 1; /*标记量*/
  33. U.MD.UI.calendar.template = [ /*html模板块*/
  34. /*功能*/
  35. '<div class="U_MD_UI_calendar_features">' +
  36. '<div class="U_MD_UI_calendar_closeBtn" id="U_MD_UI_calendar_closeBtn">关闭</div>' +
  37. '<div class="U_MD_UI_calendar_features_a">' +
  38. '<div class="U_MD_UI_calendar_prev U_MD_UI_calendar_btn" id="prevDate"></div>' +
  39. '<div class="U_MD_UI_calendar_tit" id="calendar_tit"></div>' +
  40. '<input type="text" id="calendar_tit_btn" style="display: none;">' +
  41. '<div class="U_MD_UI_calendar_next U_MD_UI_calendar_btn" id="nextDate"></div>' +
  42. '</div>' +
  43. '<i></i>' +
  44. '</div>',
  45. /*星期*/
  46. '<div id="calendar_day">' +
  47. '<ul class="U_MD_UI_calendar_week">' +
  48. '<li>日</li>' +
  49. '<li>一</li>' +
  50. '<li>二</li>' +
  51. '<li>三</li>' +
  52. '<li>四</li>' +
  53. '<li>五</li>' +
  54. '<li>六</li>' +
  55. '</ul>' +
  56. '<ul class="U_MD_UI_calendar_c" id="calendar_week_c"></ul>' +
  57. '</div>',
  58. /*选择月*/
  59. '<div class="U_MD_UI_calendar_month" id="calendar_month" style="display: none">' +
  60. '<ul class="U_MD_UI_calendar_month_c">' +
  61. '<li><span>1月</span></li>' +
  62. '<li><span>2月</span></li>' +
  63. '<li><span>3月</span></li>' +
  64. '<li><span>4月</span></li>' +
  65. '<li><span>5月</span></li>' +
  66. '<li><span>6月</span></li>' +
  67. '<li><span>7月</span></li>' +
  68. '<li><span>8月</span></li>' +
  69. '<li><span>9月</span></li>' +
  70. '<li><span>10月</span></li>' +
  71. '<li><span>11月</span></li>' +
  72. '<li><span>12月</span></li>' +
  73. '</ul>' +
  74. '</div>',
  75. /*选择年*/
  76. '<div id="calendar_year" class="U_MD_UI_calendar_month" style="display: none">' +
  77. '<ul class="U_MD_UI_calendar_month_c">' +
  78. '<li></li>' +
  79. '<li></li>' +
  80. '<li></li>' +
  81. '<li></li>' +
  82. '<li></li>' +
  83. '<li></li>' +
  84. '<li></li>' +
  85. '<li></li>' +
  86. '<li></li>' +
  87. '<li></li>' +
  88. '<li></li>' +
  89. '<li></li>' +
  90. '</ul>' +
  91. '</div>',
  92. /*选择时间*/
  93. '<span id="U_MD_UI_calendar_timeText" class="U_MD_UI_calendar_timeText">选择时间</span>' +
  94. '<div class="U_MD_UI_calendar_timeBox">' +
  95. '<div id="U_MD_UI_calendar_clearText" class="U_MD_UI_calendar_timeBtn">清空</div>' +
  96. '<div id="U_MD_UI_calendar_nowTime" class="U_MD_UI_calendar_timeBtn">现在</div>' +
  97. '<div id="U_MD_UI_calendar_okBtn" class="U_MD_UI_calendar_timeBtn">确定</div>' +
  98. '</div>',
  99. /*选择时间内容*/
  100. '<div id="calendar_timeChoose" class="U_MD_UI_calendar_timeChoose" style="display: none">' +
  101. '</div>'
  102. ];
  103. /**
  104. * 创建日历的壳
  105. * @param els 对象元素
  106. * @param els 父元素
  107. */
  108. U.MD.UI.calendar.create = function (els, parentnode) {
  109. if (els == U.MD.UI.calendar.fouseinp && U.MD.UI.calendar.board.style.display == 'block')
  110. return
  111. if (parentnode && U.MD.UI.calendar.board) {
  112. U.MD.UI.calendar.board.parentNode.removeChild(U.MD.UI.calendar.board);
  113. U.MD.UI.calendar.board = null;
  114. }
  115. var _top = document.documentElement.scrollTop || document.body.scrollTop,
  116. _left = document.documentElement.scrollLeft || document.body.scrollLeft;
  117. var _offsetHtml = [Math.abs(els.getBoundingClientRect().left) + _left, Math.abs(els.getBoundingClientRect().top) + _top]; /*获取元素相对于html文档的距离*/
  118. U.MD.UI.calendar.fouseinp = els; /*当前聚焦的input*/
  119. if (!U.MD.UI.calendar.board) { /*判断是否有创建日历内容*/
  120. U.MD.UI.calendar.showBoard(els, _offsetHtml, parentnode); /*创建日历内容*/
  121. } else {
  122. U.MD.UI.calendar.resetData(_offsetHtml);
  123. }
  124. U.MD.UI.calendar.showDay(); /*日期显示*/
  125. }
  126. /**
  127. * 时分秒模板控制
  128. * @param that 对象元素
  129. * @param text 改变的文字
  130. */
  131. U.MD.UI.calendar.toggleChooseText = function (that) {
  132. var _child = U.selectEl('.U_MD_UI_calendar_c_a')[0].children, //模板元素
  133. _len = _child.length; //长度
  134. if (that.innerText == '返回日期') { //点击的字
  135. U.MD.UI.calendar.changeDisplay(_lastTemplate, _child[_len - 1]); //切换模板
  136. that.innerText = "选择时间"; //改变文字
  137. U.selectEl(that).removeClass("U_MD_UI_calendar_timeTextClick"); //删除选中class
  138. return; //调出函数
  139. }
  140. for (var i = 0; i < _len - 1; i++) { //循环模板
  141. _child[i].style.display != 'none' && (_child[i].style.display = 'none', _lastTemplate = _child[i]); //隐藏
  142. }
  143. _child[_len - 1].style.display = 'block'; //显示选择时分秒模板
  144. that.innerText = "返回日期"; //改变文字
  145. U.selectEl(that).addClass("U_MD_UI_calendar_timeTextClick"); //添加class
  146. }
  147. /**
  148. * 数据重置
  149. * @param offsethtml 偏移量
  150. */
  151. U.MD.UI.calendar.resetData = function (offsethtml) {
  152. U.MD.UI.calendar.board.style.display = 'block'; /*让日历显示*/
  153. U.MD.UI.calendar.mark = 1;
  154. U.selectEl('#calendar_day')[0].style.display = 'block';
  155. U.selectEl('#calendar_month')[0].style.display = 'none';
  156. U.selectEl('#calendar_year')[0].style.display = 'none';
  157. U.MD.UI.calendar.board.style.left = offsethtml[0] + 'px'; /*改变日历显示的x轴*/
  158. U.MD.UI.calendar.board.style.top = offsethtml[1] + U.MD.UI.calendar.fouseinp.clientHeight + 10 + 'px'; /*改变日历显示的y轴*/
  159. U.MD.UI.calendar.year = U.MD.UI.calendar.CURRENTYEAR;
  160. U.MD.UI.calendar.month = U.MD.UI.calendar.CURRENTMONTH;
  161. U.MD.UI.calendar.ChooseDefault(true);
  162. }
  163. /**
  164. * 创建时间选择模块
  165. * @param addel 添加父元素
  166. */
  167. U.MD.UI.calendar.createChooseTime = function (addel) {
  168. var _dataObj = [["时", "分", "秒"], [24, 60, 60], ["hour", "minute", "second"]],
  169. _lastTemplate;
  170. var _ct = $$('div', { id: 'calendar_time', className: 'U_MD_UI_calendar_time', innerHTML: U.MD.UI.calendar.template[4] }, U.MD.UI.calendar.board);
  171. for (var i = 0; i < _dataObj[0].length; i++) {
  172. var _row = $$('div', { className: "U_MD_UI_calendar_timeRow" }, addel);
  173. $$('span', { className: "U_MD_UI_calendar_timeRowText", innerText: _dataObj[0][i] }, _row);
  174. var _rowCon = $$('div', { className: "U_MD_UI_calendar_timeRowCon" }, _row),
  175. _ul = $$('ul', { className: "U_MD_UI_calendar_timeRowUl", name: _dataObj[2][i] }, _rowCon);
  176. for (var j = 0; j < _dataObj[1][i]; j++) {
  177. var _text = j.toString().length == 1 ? '0' + j : j;
  178. $$('li', { innerText: _text, onclick: function () {
  179. var _parentUl = this.parentNode,
  180. _activeLi = _parentUl.querySelector('.U_MD_UI_calendar_timeRowActive');
  181. U.selectEl(_activeLi).removeClass('U_MD_UI_calendar_timeRowActive');
  182. U.selectEl(this).addClass('U_MD_UI_calendar_timeRowActive');
  183. switch (_parentUl.name) {
  184. case 'hour': U.MD.UI.calendar.hour = this.innerText; break;
  185. case 'minute': U.MD.UI.calendar.minute = this.innerText; break;
  186. case 'second': U.MD.UI.calendar.second = this.innerText; break;
  187. }
  188. }
  189. }, _ul);
  190. }
  191. }
  192. if (!U.MD.UI.calendar.datetimeformat) {
  193. _ct.style.display = 'none';
  194. }
  195. U.selectEl('#U_MD_UI_calendar_timeText')[0].onclick = function () { //绑定进入选择时分秒的模块时间
  196. U.MD.UI.calendar.toggleChooseText(this)
  197. }
  198. U.selectEl('#U_MD_UI_calendar_clearText')[0].onclick = function () { //绑定清空事件
  199. U.MD.UI.calendar.fouseinp.value ? U.MD.UI.calendar.fouseinp.value = '' : U.MD.UI.calendar.fouseinp.innerText = '';
  200. U.MD.UI.calendar.ChooseDefault(true);
  201. U.MD.UI.calendar.board.style.display = 'none';
  202. }
  203. U.selectEl('#U_MD_UI_calendar_nowTime')[0].onclick = function () { //绑定输出今天事件
  204. U.MD.UI.calendar.outPutDate(true);
  205. }
  206. U.selectEl('#U_MD_UI_calendar_okBtn')[0].onclick = function () { //绑定确定事件
  207. U.MD.UI.calendar.outPutDate(false);
  208. }
  209. }
  210. /**
  211. * 创建日历
  212. * @param input 当前聚焦的input
  213. * @param offsetHtml 元素相对于html文档的距离
  214. */
  215. U.MD.UI.calendar.showBoard = function (input, offsetHtml, parentnode) {
  216. var _template = U.MD.UI.calendar.template, /*转局部变量*/
  217. _parentNode = parentnode || document.body,
  218. _templateHTML = _template[1] + _template[2] + _template[3] + _template[5];
  219. if (!parentnode) {
  220. U.MD.UI.calendar.board = $$('div', { "className": "U_MD_UI_calendar_bigboard", style: { left: offsetHtml[0] + "px", top: offsetHtml[1] + input.clientHeight + 10 + "px"} }, _parentNode); /*创建日历元素*/
  221. } else {
  222. U.MD.UI.calendar.board = $$('div', { "className": "U_MD_UI_calendar_bigboard" }, parentnode);
  223. }
  224. U.MD.UI.calendar.board.innerHTML = _template[0]; /*给上html模板的第一个*/
  225. _dayC = $$('div', { "className": 'U_MD_UI_calendar_c_a', innerHTML: _templateHTML }, U.MD.UI.calendar.board); /*创建剩下的内容,把html模板内容丢进去*/
  226. U.MD.UI.calendar.tit = U.selectEl('#calendar_tit')[0]; /*获取日历标题*/
  227. _mc = U.selectEl('#calendar_month > ul > li'); /*获取选择月模块的li*/
  228. _titInp = U.selectEl('#calendar_tit_btn')[0]; /*获取日历标题的input*/
  229. _timer = null; /*定义一个定时器*/
  230. U.MD.UI.calendar.createChooseTime($('#calendar_timeChoose')[0]);
  231. U.MD.UI.calendar.tit.onclick = function () { /*给日历标题绑定点击事件*/
  232. clearTimeout(_timer); /*清除定时器*/
  233. if (U.MD.UI.calendar.mark == 1) { /*标记数是1*/
  234. U.MD.UI.calendar.tit.innerText = U.MD.UI.calendar.year; /*日历标题赋值可变月*/
  235. U.MD.UI.calendar.changeDisplay($('#calendar_month')[0], U.selectEl('#calendar_day')[0]); /*选择月显示,选择天隐藏*/
  236. U.MD.UI.calendar.mark = 2; /*标记数赋值2,以表示当前停留在选择月模块*/
  237. U.MD.UI.calendar.ChooseDefault();
  238. } else if (U.MD.UI.calendar.mark == 2) { /*标记数是2*/
  239. _timer = setTimeout(function () { /*赋值一个定时器*/
  240. U.MD.UI.calendar.changeDisplay($('#calendar_year')[0], U.selectEl('#calendar_month')[0]); /*选择年显示,选择月隐藏*/
  241. U.MD.UI.calendar.dateTenYear(); /*调用显示10年内容函数*/
  242. U.MD.UI.calendar.mark = 3; /*标记数复制3,以表示档期那停球在选择年模块*/
  243. U.MD.UI.calendar.ChooseDefault();
  244. }, 250); /*0.25秒后执行*/
  245. }
  246. }
  247. U.MD.UI.calendar.tit.ondblclick = function () { /*给日历标题绑定双击事件*/
  248. clearTimeout(_timer); /*清除定时器,防止进入单击事件*/
  249. if (U.MD.UI.calendar.mark === 2) { /*标记数是2*/
  250. _obj = U.MD.UI.calendar.changeDisplay(_titInp, this, 'inline-block'); /*日历标题文本框显示,日历标题隐藏*/
  251. _obj[0].value = this.innerText; /*把日历title赋值给编辑input*/
  252. _obj[0].focus(); /*编辑input给上聚焦*/
  253. }
  254. }
  255. _titInp.onkeydown = function (e) { /*给日历标题文本框一个键盘事件*/
  256. switch (e.keyCode) {
  257. case 13: /*编辑input 回车来更改内容*/
  258. var _arr2 = U.MD.UI.calendar.changeDisplay(U.MD.UI.calendar.tit, this, 'inline-block'); /*显示日历title, 隐藏编辑input*/
  259. _arr2[0].innerText = U.MD.UI.calendar.year = !isNaN(parseInt(this.value)) ? parseInt(this.value) : U.MD.UI.calendar.CURRENTYEAR; /*把编辑input的内容赋值给日历title*/
  260. break;
  261. }
  262. };
  263. _titInp.onblur = function () { /*给日历标题文本框一个失去焦点*/
  264. var _arr3 = U.MD.UI.calendar.changeDisplay(U.MD.UI.calendar.tit, this, 'inline-block'); /*同上*/
  265. _arr3[0].innerText = U.MD.UI.calendar.year = !isNaN(parseInt(this.value)) ? parseInt(this.value) : U.MD.UI.calendar.CURRENTYEAR;
  266. }
  267. U.selectEl('#prevDate')[0].onclick = function () { /*给向左的小三角绑定点击事件*/
  268. if (U.MD.UI.calendar.mark == 1) { _lessNum = -1 } /*标记数是1,-1月*/
  269. else if (U.MD.UI.calendar.mark == 2) { _lessNum = -12 } /*标记数是2,-12月*/
  270. else if (U.MD.UI.calendar.mark == 3) { _lessNum = -120 }; /*标记数是3, -120月*/
  271. U.MD.UI.calendar.fullDate(_lessNum, false);
  272. };
  273. U.selectEl('#nextDate')[0].onclick = function () { /*给向右的小三角绑定点击事件*/
  274. if (U.MD.UI.calendar.mark == 1) { _addNum = 1 } /*标记数是1,+1月*/
  275. else if (U.MD.UI.calendar.mark == 2) { _addNum = 12 } /*标记数是1,+12月*/
  276. else if (U.MD.UI.calendar.mark == 3) { _addNum = 120 }; /*标记数是1,+120月*/
  277. U.MD.UI.calendar.fullDate(_addNum, true);
  278. };
  279. for (var i = 0; i < _mc.length; i++) { /*给选择月的模块li循环*/
  280. _mc[i].onclick = function () { /*给每个绑定一个点击事件*/
  281. U.MD.UI.calendar.changeDisplay($('#calendar_day')[0], U.selectEl('#calendar_month')[0]); /*选择天显示,选择月隐藏*/
  282. U.MD.UI.calendar.month = parseInt(this.innerText) - 1; /*赋值选的月*/
  283. U.MD.UI.calendar.showDay(); /*刷新数据*/
  284. U.MD.UI.calendar.mark = 1; /*标记量赋值1*/
  285. }
  286. }
  287. U.selectEl('#U_MD_UI_calendar_closeBtn')[0].onclick = function () { /*给关闭按钮绑定一个事件*/
  288. U.UF.EV.stopBubble();
  289. U.MD.UI.calendar.board.style.display = 'none'; /*让日历空间隐藏*/
  290. }
  291. }
  292. /**
  293. * 创建或更新选择天模块的内容
  294. */
  295. U.MD.UI.calendar.showDay = function () { /*显示日期*/
  296. _monthFristDay = new Date(U.MD.UI.calendar.year, U.MD.UI.calendar.month, 1).getDay(); /*当月第一天的星期*/
  297. _lastMonthDay = new Date(U.MD.UI.calendar.year, U.MD.UI.calendar.month, 0).getDate(); /*上个月的最后一天*/
  298. _fullDay = new Date(U.MD.UI.calendar.year, U.MD.UI.calendar.month + 1, 0).getDate(); /*当月总天数*/
  299. _totalDay = (_t = _monthFristDay + _fullDay) % 7 === 0 ? _t : _t + (7 - _t % 7); /*当月总共需要显示天数*/
  300. _dayC = U.selectEl('#calendar_week_c')[0];
  301. _dayC.innerHTML = '';
  302. for (var _i = 0; _i < _totalDay; _i++) {
  303. _li = $$('li', {}, _dayC);
  304. if (_i < _monthFristDay) { /*如果小于当月第一天的星期,这里显示的是上月最后几天的号显示*/
  305. $$('span', { "className": 'U_MD_UI_calendar_unavailable', innerText: (_lastMonthDay - _monthFristDay + _i + 1) }, _li);
  306. } else if (_i < (_fullDay + _monthFristDay)) { /*如果小于(当月总天数 + 当月第一天的星期)*/
  307. var _d = _i - _monthFristDay + 1, _week = new Date(U.MD.UI.calendar.year, U.MD.UI.calendar.month, _d).getDay(), _today = U.MD.UI.calendar.NOW.getDate() === _d && (U.MD.UI.calendar.CURRENTMONTH === U.MD.UI.calendar.month && U.MD.UI.calendar.CURRENTYEAR === U.MD.UI.calendar.year);
  308. _dayV = _d;
  309. if (_week === 6 || _week === 0) { /*如果是周末字体显示为红色,否则给黑色*/
  310. _today ? $$('span', { "className": 'U_MD_UI_calendar_day U_MD_UI_calendar_today U_MD_UI_calendar_weekend', innerText: _d, "onclick": function () { U.MD.UI.calendar.day = this.innerText; U.MD.UI.calendar.outPutDate() } }, _li) : $$('span', { "className": 'U_MD_UI_calendar_day U_MD_UI_calendar_weekend', innerText: _d, "onclick": function () { U.MD.UI.calendar.day = this.innerText; U.MD.UI.calendar.outPutDate() } }, _li);
  311. } else if (_today) { /*如果是今天,打重点*/
  312. $$('span', { "className": 'U_MD_UI_calendar_day U_MD_UI_calendar_today', innerText: _d, "onclick": function () { U.MD.UI.calendar.day = this.innerText; U.MD.UI.calendar.outPutDate() } }, _li)
  313. } else { /*默认样式*/
  314. $$('span', { "className": 'U_MD_UI_calendar_day', innerText: _d, "onclick": function () { U.MD.UI.calendar.day = this.innerText; U.MD.UI.calendar.outPutDate() } }, _li)
  315. }
  316. } else { /*显示下个月的星期,给上字体是灰色的样式*/
  317. $$('span', { "className": 'U_MD_UI_calendar_unavailable', innerText: (_i - (_fullDay + _monthFristDay) + 1) }, _li)
  318. }
  319. }
  320. U.MD.UI.calendar.tit.innerText = U.MD.UI.calendar.year + '-' + (U.MD.UI.calendar.month + 1) + '月'; /*转换格式,然后丢到日历标题文本框里*/
  321. }
  322. /**
  323. * 年月控制器
  324. * @param num 需要减的月数
  325. * @param check 如果是true表示点击了向右的小三角,是false表示点击了向左的小三角
  326. */
  327. U.MD.UI.calendar.fullDate = function (num, check) {
  328. var _year = (_n = Math.abs(num) / 12) >= 1 ? _n >>> 0 : 0, /*如果月份/12大于1,也就是超过12月或者说1年, _n>>>0取出整数部分*/
  329. _month = Math.abs(num) % 12; /*月份膜上12剩下的就是月份*/
  330. !check && (_month = -_month);
  331. !check && (_year = -_year);
  332. U.MD.UI.calendar.month += _month; /*月份加一或减一*/
  333. U.MD.UI.calendar.year += _year; /*年份加一或减一*/
  334. if (check) {
  335. if (U.MD.UI.calendar.month > 11) { /*如果月份大于11*/
  336. U.MD.UI.calendar.month = 0; /*月份清空*/
  337. U.MD.UI.calendar.year++; /*年份加一*/
  338. }
  339. } else {
  340. if (U.MD.UI.calendar.month < 0) { /*如果月份小于0*/
  341. U.MD.UI.calendar.month = 11; /*可变月赋值11,即表示12月*/
  342. U.MD.UI.calendar.year--; /*可变年减一*/
  343. }
  344. }
  345. if (U.MD.UI.calendar.mark == 1) { U.MD.UI.calendar.showDay() }; /*更新日期显示*/
  346. if (U.MD.UI.calendar.mark == 2) { U.MD.UI.calendar.tit.innerText = U.MD.UI.calendar.year }; /*标记数是2,即代表在选择月模块,*/
  347. if (U.MD.UI.calendar.mark == 3) { U.MD.UI.calendar.dateTenYear() }; /*标记数是3,即代表在选择年模块,*/
  348. }
  349. /**
  350. * 转换输出格式
  351. * @param symbol 分割符号
  352. * @param isnow 【boolean】 是否获取当前时间
  353. * @returns {*} 返回字符串
  354. */
  355. U.MD.UI.calendar.formartDate = function (symbol, isnow) {
  356. var _symbol, y, m, d, h, m, s;
  357. _symbol = symbol || '-'
  358. y = isnow ? U.MD.UI.calendar.CURRENTYEAR : U.MD.UI.calendar.year;
  359. m = isnow ? U.MD.UI.calendar.CURRENTMONTH + 1 : U.MD.UI.calendar.month + 1;
  360. d = isnow ? U.MD.UI.calendar.CURRENTDAY : U.MD.UI.calendar.day;
  361. m = (m.toString())[1] ? m : '0' + m;
  362. d = (d.toString())[1] ? d : '0' + d;
  363. var _dateStr = y + _symbol + m + _symbol + d;
  364. if (typeof U.MD.UI.calendar.datetimeformat == 'boolean' && U.MD.UI.calendar.datetimeformat) {
  365. if (isnow) {
  366. var _nowDate = new Date();
  367. U.MD.UI.calendar.hour = _nowDate.getHours();
  368. U.MD.UI.calendar.minute = _nowDate.getMinutes();
  369. U.MD.UI.calendar.second = _nowDate.getSeconds();
  370. }
  371. h = (U.MD.UI.calendar.hour.toString())[1] ? U.MD.UI.calendar.hour : '0' + U.MD.UI.calendar.hour;
  372. m = (U.MD.UI.calendar.minute.toString())[1] ? U.MD.UI.calendar.minute : '0' + U.MD.UI.calendar.minute;
  373. s = (U.MD.UI.calendar.second.toString())[1] ? U.MD.UI.calendar.second : '0' + U.MD.UI.calendar.second;
  374. _dateStr += " " + h + ":" + m + ":" + s;
  375. }
  376. return _dateStr;
  377. }
  378. /**
  379. * 创建选择天时需要循环绑定的函数
  380. */
  381. /*
  382. U.MD.UI.calendar.outPutDate = function () {
  383. if (U.MD.UI.calendar.fouseinp.value) {
  384. U.MD.UI.calendar.fouseinp.value = U.MD.UI.calendar.formartDate(U.MD.UI.calendar.year, U.MD.UI.calendar.month + 1, this.innerText);
  385. } else {
  386. U.MD.UI.calendar.fouseinp.innerText = U.MD.UI.calendar.formartDate(U.MD.UI.calendar.year, U.MD.UI.calendar.month + 1, this.innerText);
  387. }
  388. U.MD.UI.calendar.board.style.display = 'none';
  389. }
  390. */
  391. /**
  392. * 创建选择天时需要循环绑定的函数
  393. */
  394. U.MD.UI.calendar.outPutDate = function (isNow) {
  395. if (U.MD.UI.calendar.fouseinp.tagName === 'INPUT') {
  396. U.MD.UI.calendar.fouseinp.value = U.MD.UI.calendar.formartDate('-', isNow); /*选择天后进入转换年月日输入格式函数*/
  397. } else {
  398. U.MD.UI.calendar.fouseinp.innerText = U.MD.UI.calendar.formartDate('-', isNow); /*选择天后进入转换年月日输入格式函数*/
  399. }
  400. U.MD.UI.calendar.CheckedDay && U.MD.UI.calendar.CheckedDay();
  401. U.MD.UI.calendar.board.style.display = 'none'; /*隐藏日历控件*/
  402. }
  403. /**
  404. * 显示与隐藏
  405. * @param blockEl 需要显示的元素
  406. * @param noneEl 需要隐藏的元素
  407. * @param val 显示的方式
  408. * @returns {*[]} 返回数组[显示元素,隐藏元素]
  409. */
  410. U.MD.UI.calendar.changeDisplay = function (blockEl, noneEl, val) {
  411. val = val || 'block'; /*默认block*/
  412. if (blockEl && typeof blockEl === 'object') { blockEl.setAttribute('style', 'display:' + val) } /*如果blockEL存在且blockEl是个对象,进行属性的赋值*/
  413. if (noneEl && typeof noneEl === 'object') { noneEl.setAttribute('style', 'display:none') }; /*如果noneEl存在且noneEl是个对象,进行属性的赋值*/
  414. return [blockEl, noneEl];
  415. }
  416. /**
  417. * 更新选择年的模块内容
  418. */
  419. U.MD.UI.calendar.dateTenYear = function () {
  420. _yearArr = U.selectEl('#calendar_year > ul > li'); /*获取选择年模块里的li*/
  421. _startYear = U.MD.UI.calendar.year - (U.MD.UI.calendar.year % 10); /**/
  422. for (var i = 0; i < _yearArr.length; i++) {
  423. _yearArr[i].onclick = function () {
  424. U.MD.UI.calendar.mark = 2; /*标记数赋值2*/
  425. U.MD.UI.calendar.year = parseInt(this.innerText); /*修改年的的值*/
  426. U.MD.UI.calendar.changeDisplay($('#calendar_month')[0], U.selectEl('#calendar_year')[0]); /*显示选择月板块,隐藏选择年的板块*/
  427. U.MD.UI.calendar.tit.innerText = this.innerText; /*改变日历title显示格式*/
  428. }
  429. _yearArr[i].innerHTML = ''; /*清空li里面的内容*/
  430. if (i == 0 || i == _yearArr.length - 1) { /*头尾年*/
  431. $$('span', { "className": "U_MD_UI_calendar_unavailable", innerText: (_startYear + i - 1) }, _yearArr[i]);
  432. } else if ((_startYear + i - 1) === U.MD.UI.calendar.CURRENTYEAR) { /*当前年*/
  433. $$('span', { style: { "background-color": "#eed1bc" }, innerText: (_startYear + i - 1) }, _yearArr[i])
  434. } else { /*默认输出*/
  435. $$('span', { innerText: (_startYear + i - 1) }, _yearArr[i])
  436. }
  437. }
  438. U.MD.UI.calendar.tit.innerText = (t = (U.MD.UI.calendar.year - (U.MD.UI.calendar.year % 10))) + '-' + (t + 9); /*改变日历title显示格式*/
  439. }
  440. /**
  441. * 时分秒数据初始化
  442. * @param deafultflag 【boolean】是否初始化数据
  443. */
  444. U.MD.UI.calendar.ChooseDefault = function (deafultflag) {
  445. if (U.MD.UI.calendar.datetimeformat) { //判断是否显示时分秒模板
  446. if (deafultflag) { //是否初始化数据
  447. U.MD.UI.calendar.hour = '00'; //重置
  448. U.MD.UI.calendar.minute = '00'; //重置
  449. U.MD.UI.calendar.second = '00'; //重置
  450. U.selectEl(U.MD.UI.calendar.board).find('.U_MD_UI_calendar_timeRowActive').removeClass('U_MD_UI_calendar_timeRowActive'); //清除选中的样式
  451. !$('#U_MD_UI_calendar_timeText').length && U.MD.UI.calendar.createChooseTime($('#calendar_timeChoose')[0]); //是否有加载时分秒模块
  452. }
  453. U.selectEl('#calendar_time')[0].style.display = "block"; //显示选择时间的功能区
  454. U.selectEl('#calendar_timeChoose')[0].style.display = 'none'; //隐藏选择时分秒选择区
  455. U.selectEl('#U_MD_UI_calendar_timeText')[0].innerText = "选择时间"; //重置
  456. U.selectEl('#U_MD_UI_calendar_timeText').removeClass("U_MD_UI_calendar_timeTextClick"); //重置
  457. } else {
  458. U.selectEl('#calendar_time')[0].style.display = 'none'; //重置
  459. U.selectEl('#calendar_timeChoose')[0].style.display = 'none'; //重置
  460. }
  461. }
  462. U.MD.UI.calendar.SetCallBack = function (funcname, func) {
  463. if (typeof func != 'function' || !"CheckedDay ".match(funcname + ' '))
  464. return 0;
  465. U.MD.UI.calendar[funcname] = func
  466. }