Calendar.js 44 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460
  1. o2.widget = o2.widget || {};
  2. o2.widget.Calendar = o2.Calendar = new Class({
  3. Implements: [Options, Events],
  4. Extends: o2.widget.Common,
  5. options: {
  6. "style": "default",
  7. "path": o2.session.path+"/widget/$Calendar/" ,
  8. "defaultView": "day", //day, month, year
  9. "baseDate": new Date(),
  10. "secondEnable" : false,
  11. "isTime": false,
  12. "isMulti": false,
  13. "before": null,
  14. "after": null,
  15. "timeOnly": false,
  16. "defaultDate": new Date(),
  17. "beforeCurrent": true,
  18. "range": false,
  19. "rangeNodes": [],
  20. "rangeRule": "asc", //asc + , des -
  21. "target": null
  22. },
  23. initialize: function(node, options){
  24. Locale.use("zh-CHS");
  25. this.setOptions(options);
  26. this.options.defaultTime = ""+this.options.baseDate.getHours()+":"+this.options.baseDate.getMinutes()+":"+this.options.baseDate.getSeconds();
  27. this.path = o2.session.path+"/widget/$Calendar/";
  28. this.cssPath = o2.session.path+"/widget/$Calendar/"+this.options.style+"/css.wcss";
  29. this._loadCss();
  30. // this.options.containerPath = this.path+this.style+"/container.html";
  31. // this.options.dayPath = this.path+this.style+"/day.html";
  32. // this.options.monthPath = this.path+this.style+"/month.html";
  33. // this.options.yearPath = this.path+this.style+"/year.html";
  34. // this.options.timePath = this.path+this.style+"/time.html";
  35. if (!this.options.format){
  36. if (this.options.isTime){
  37. //this.options.format = Locale.get("Date").shortDate + " " + Locale.get("Date").shortTime;
  38. if(this.options.timeOnly){
  39. this.options.format="%H:%M";
  40. }
  41. else{
  42. this.options.format = Locale.get("Date").shortDate + " " + "%H:%M";
  43. }
  44. }else{
  45. this.options.format = Locale.get("Date").shortDate;
  46. }
  47. }
  48. this.options.containerPath = this.options.path+this.options.style+"/container.html";
  49. this.options.dayPath = this.options.path+this.options.style+"/day.html";
  50. this.options.monthPath = this.options.path+this.options.style+"/month.html";
  51. this.options.yearPath = this.options.path+this.options.style+"/year.html";
  52. this.options.timePath = this.options.path+this.options.style+"/time.html";
  53. this.today = new Date();
  54. this.currentView = this.options.defaultView;
  55. this.node = $(node);
  56. this.visible = false;
  57. this.container = this.createContainer();
  58. this.container.inject((this.options.target) || $(document.body));
  59. this.contentTable = this.createContentTable();
  60. this.contentTable.inject(this.contentDateNode);
  61. this.addEvents();
  62. this.container.set({
  63. styles: {
  64. "display": "none",
  65. "opacity": 1
  66. }
  67. });
  68. this.fireEvent("init");
  69. //this.move = true;
  70. //this.containerDrag = new Drag.Move(this.container);
  71. if( layout.mobile ){
  72. this.maskNode = new Element("div.maskNode",{
  73. styles : {
  74. "width": "100%",
  75. "height": "100%",
  76. "opacity": 0.6,
  77. "position": "absolute",
  78. "background-color": "#CCC",
  79. "top": "0px",
  80. "left": "0px",
  81. "z-index" : 150,
  82. "-webkit-user-select": "none",
  83. "-moz-user-select": "none",
  84. "user-select" : "none"
  85. },
  86. events : {
  87. "touchmove" : function(ev){
  88. ev.stopPropagation();
  89. ev.preventDefault();
  90. }
  91. }
  92. }).inject((this.options.target) || $(document.body));
  93. this.container.addEvents({
  94. "touchmove" : function(ev){
  95. ev.stopPropagation();
  96. ev.preventDefault();
  97. },
  98. "touchend" : function(ev){
  99. ev.stopPropagation();
  100. //ev.preventDefault();
  101. }
  102. })
  103. }
  104. },
  105. addEvents: function(){
  106. this.node.addEvent("focus", function(){
  107. this.show();
  108. }.bind(this));
  109. this.node.addEvent("click", function(){
  110. this.show();
  111. }.bind(this));
  112. this.prevNode.addEvent("click", function(){
  113. this.getPrev();
  114. }.bind(this));
  115. this.nextNode.addEvent("click", function(){
  116. this.getNext();
  117. }.bind(this));
  118. this.currentTextNode.addEvent("click", function(){
  119. this.changeView();
  120. }.bind(this));
  121. if( !layout.mobile ){
  122. this.titleNode.addEvent("mousedown", function(){
  123. this.move();
  124. }.bind(this));
  125. this.titleNode.addEvent("mouseup", function(){
  126. this.unmove();
  127. }.bind(this));
  128. }
  129. document.addEvent('mousedown', this.outsideClick.bind(this));
  130. },
  131. move: function(){
  132. this.containerDrag = new Drag.Move(this.container, {
  133. "onDrag": function(e){
  134. if (this.iframe){
  135. var p = this.container.getPosition();
  136. this.iframe.setStyles({
  137. "top": ""+p.y+"px",
  138. "left": ""+p.x+"px"
  139. });
  140. }
  141. }.bind(this)
  142. });
  143. },
  144. unmove: function(){
  145. this.container.removeEvents("mousedown");
  146. this.titleNode.addEvent("mousedown", function(){
  147. this.move();
  148. }.bind(this));
  149. },
  150. changeView: function(){
  151. var view = "day";
  152. switch (this.currentView) {
  153. case "day" :
  154. this.changeViewToMonth();
  155. break;
  156. case "month" :
  157. this.changeViewToYear();
  158. break;
  159. case "year" :
  160. this.changeViewToDay();
  161. break;
  162. case "time" :
  163. this.changeViewToDay();
  164. //this.changeViewToDay();
  165. break;
  166. default :
  167. //nothing;
  168. }
  169. },
  170. changeViewToMonth: function(year){
  171. this.currentView = "month";
  172. if (!this.contentMonthTable){
  173. this.contentMonthTable = this.createContentTable();
  174. this.contentMonthTable.inject(this.contentDateNode);
  175. }
  176. if (this.contentTable) this.contentTable.setStyle("display", "none");
  177. if (this.contentYearTable) this.contentYearTable.setStyle("display", "none");
  178. if (this.contentTimeTable) this.contentTimeTable.setStyle("display", "none");
  179. // if (this.contentMonthTable) this.contentMonthTable.setStyle("display", "block");
  180. if (this.contentMonthTable) this.contentMonthTable.setStyle("display", "table");
  181. var year = (year!=undefined) ? year : this.currentTextNode.retrieve("year");
  182. var month = this.currentTextNode.retrieve("month");
  183. this.showMonth(year, month);
  184. this.fireEvent("changeViewToMonth");
  185. },
  186. changeViewToYear: function(year){
  187. this.currentView = "year";
  188. if (!this.contentYearTable){
  189. this.contentYearTable = this.createContentTable();
  190. this.contentYearTable.inject(this.contentDateNode);
  191. }
  192. if (this.contentTable) this.contentTable.setStyle("display", "none");
  193. if (this.contentMonthTable) this.contentMonthTable.setStyle("display", "none");
  194. if (this.contentTimeTable) this.contentTimeTable.setStyle("display", "none");
  195. // if (this.contentYearTable) this.contentYearTable.setStyle("display", "block");
  196. if (this.contentYearTable) this.contentYearTable.setStyle("display", "table");
  197. this.showYear(year);
  198. this.fireEvent("changeViewToYear");
  199. },
  200. changeViewToDay: function(year, month){
  201. this.currentView = "day";
  202. if (!this.contentTable){
  203. this.contentTable = this.createContentTable();
  204. this.contentTable.inject(this.contentDateNode);
  205. }
  206. if (this.contentMonthTable) this.contentMonthTable.setStyle("display", "none");
  207. if (this.contentYearTable) this.contentYearTable.setStyle("display", "none");
  208. if (this.contentTimeTable) this.contentTimeTable.setStyle("display", "none");
  209. // if (this.contentTable) this.contentTable.setStyle("display", "block");
  210. if (this.contentTable) this.contentTable.setStyle("display", "table");
  211. this.showDay(year, month);
  212. this.showMonthYearButton();
  213. this.fireEvent("changeViewToDay");
  214. },
  215. hideMonthYearButton : function(){
  216. if(this.clearButton_month){
  217. this.clearButton_month.hide();
  218. }
  219. },
  220. showMonthYearButton : function(){
  221. if( this.buttonArea && !this.clearButton_month ){
  222. this.container.setStyle("height","auto");
  223. this.clearButton_month = new Element("div", {"text": "清除"}).inject(this.buttonArea);
  224. this.clearButton_month.addEvent("click", function(){
  225. this.node.set("value", "");
  226. this.fireEvent("clear");
  227. this.hide();
  228. }.bind(this));
  229. this.clearButton_month.setStyles(this.css.calendarMonthActionButton);
  230. }
  231. if(this.clearButton_month){
  232. this.clearButton_month.show();
  233. }
  234. },
  235. getNext: function(){
  236. switch (this.currentView) {
  237. case "time" :
  238. this.getNextDate();
  239. break;
  240. case "day" :
  241. this.getNextDay();
  242. break;
  243. case "month" :
  244. this.getNextMonth();
  245. break;
  246. case "year" :
  247. this.getNextYear();
  248. break;
  249. default :
  250. //nothing
  251. }
  252. },
  253. getPrev: function(){
  254. switch (this.currentView) {
  255. case "time" :
  256. this.getPrevDate();
  257. break;
  258. case "day" :
  259. this.getPrevDay();
  260. break;
  261. case "month" :
  262. this.getPrevMonth();
  263. break;
  264. case "year" :
  265. this.getPrevYear();
  266. break;
  267. default :
  268. //nothing
  269. }
  270. },
  271. getNextDate: function(){
  272. var date = this.currentTextNode.retrieve("date");
  273. // var year = this.currentTextNode.retrieve("year");
  274. // var month = this.currentTextNode.retrieve("month");
  275. // month--;
  276. // var day = this.currentTextNode.retrieve("day");
  277. // var date = new Date(year, month, day);
  278. date.increment("day", 1);
  279. this._setTimeTitle(null, date);
  280. },
  281. getPrevDate: function(){
  282. var date = this.currentTextNode.retrieve("date");
  283. date.increment("day", -1);
  284. this._setTimeTitle(null, date);
  285. },
  286. getNextDay: function(){
  287. var year = this.currentTextNode.retrieve("year");
  288. var month = this.currentTextNode.retrieve("month");
  289. month--;
  290. var date = new Date(year, month, 1);
  291. date.increment("month", 1);
  292. var thisYear = date.getFullYear();
  293. var thisMonth = date.getMonth();
  294. this._setDayTitle(null, thisYear, thisMonth);
  295. this._setDayDate(null,thisYear, thisMonth);
  296. this.fireEvent("changeViewToDay");
  297. },
  298. getPrevDay: function(){
  299. var year = this.currentTextNode.retrieve("year");
  300. var month = this.currentTextNode.retrieve("month");
  301. month--;
  302. var date = new Date(year, month, 1);
  303. date.increment("month", -1)
  304. var thisYear = date.getFullYear();
  305. var thisMonth = date.getMonth();
  306. this._setDayTitle(null, thisYear, thisMonth);
  307. this._setDayDate(null,thisYear, thisMonth);
  308. this.fireEvent("changeViewToDay");
  309. },
  310. getNextMonth: function(){
  311. var year = this.currentTextNode.retrieve("year");
  312. var date = new Date(year, 1, 1);
  313. date.increment("year", 1)
  314. var thisYear = date.getFullYear();
  315. this.showMonth(thisYear);
  316. this.fireEvent("changeViewToMonth");
  317. },
  318. getPrevMonth: function(){
  319. var year = this.currentTextNode.retrieve("year");
  320. var date = new Date(year, 1, 1);
  321. date.increment("year", -1)
  322. var thisYear = date.getFullYear();
  323. this.showMonth(thisYear);
  324. this.fireEvent("changeViewToMonth");
  325. },
  326. getNextYear: function(){
  327. var year = this.currentTextNode.retrieve("year");
  328. var date = new Date(year, 1, 1);
  329. date.increment("year", this.yearLength)
  330. var thisYear = date.getFullYear();
  331. this.showYear(thisYear);
  332. this.fireEvent("changeViewToYear");
  333. },
  334. getPrevYear: function(){
  335. var year = this.currentTextNode.retrieve("year");
  336. var date = new Date(year, 1, 1);
  337. date.increment("year", 0-this.yearLength)
  338. var thisYear = date.getFullYear();
  339. this.showYear(thisYear);
  340. this.fireEvent("changeViewToYear");
  341. },
  342. outsideClick: function(e) {
  343. if(this.visible) {
  344. var elementCoords = this.container.getCoordinates();
  345. var targetCoords = this.node.getCoordinates();
  346. if(((e.page.x < elementCoords.left || e.page.x > (elementCoords.left + elementCoords.width)) ||
  347. (e.page.y < elementCoords.top || e.page.y > (elementCoords.top + elementCoords.height))) &&
  348. ((e.page.x < targetCoords.left || e.page.x > (targetCoords.left + targetCoords.width)) ||
  349. (e.page.y < targetCoords.top || e.page.y > (targetCoords.top + targetCoords.height))) ) this.hide();
  350. }
  351. },
  352. hide: function(){
  353. if (this.visible){
  354. // if (!this.morph){
  355. // this.morph = new Fx.Morph(this.container, {"duration": 200});
  356. // }
  357. this.visible = false;
  358. // this.changeViewToDay();
  359. // this.morph.start({"opacity": 0}).chain(function(){
  360. this.container.setStyle("display", "none");
  361. if (this.iframe) this.iframe.destroy();
  362. if (layout.desktop.offices){
  363. Object.each(layout.desktop.offices, function(office){
  364. office.show();
  365. });
  366. }
  367. if( this.maskNode ){
  368. this.maskNode.hide();
  369. }
  370. // }.bind(this));
  371. this.fireEvent("hide");
  372. }
  373. },
  374. show: function(){
  375. debugger;
  376. if (!this.visible){
  377. var dStr = this.node.get("value");
  378. if (dStr && Date.isValid(dStr)){
  379. this.options.baseDate = Date.parse(dStr.substr(0,10));
  380. }
  381. if(this.options.timeOnly){
  382. this.currentView = "time";
  383. }
  384. else{
  385. this.currentView = this.options.defaultView;
  386. }
  387. switch (this.currentView) {
  388. case "day" :
  389. this.changeViewToDay();
  390. break;
  391. case "month" :
  392. this.showMonth();
  393. break;
  394. case "year" :
  395. this.showYear();
  396. break;
  397. case "time" :
  398. //this.showTime(this.options.baseDate);
  399. this.changeViewToTime(this.options.defaultDate);
  400. //this.changeViewToTime(this.options.baseDate);
  401. break;
  402. default :
  403. this.showDay();
  404. }
  405. // if (!this.morph){
  406. // this.morph = new Fx.Morph(this.container, {"duration": 200});
  407. // }
  408. this.container.setStyle("display", "block");
  409. if (this.container.position ){
  410. this.container.position({
  411. relativeTo: this.node,
  412. position: 'bottomLeft',
  413. edge: 'upperLeft'
  414. });
  415. // var offsetPNode = this.node.getOffsetParent();
  416. var cp = this.container.getPosition(this.options.target || null);
  417. var cSize = this.container.getSize();
  418. //var fp = (this.options.target) ? this.options.target.getPosition() : $(document.body).getPosition()
  419. var fsize = (this.options.target) ? this.options.target.getSize() : $(document.body).getSize();
  420. //if (cp.y+cSize.y>fsize.y+fp.y){
  421. if (cp.y+cSize.y>fsize.y){
  422. this.container.position({
  423. relativeTo: this.node,
  424. position: 'upperLeft',
  425. edge: 'bottomLeft'
  426. });
  427. }
  428. }else{
  429. var p = this.node.getPosition(this.options.target || null);
  430. var size = this.node.getSize();
  431. var containerSize = this.container.getSize();
  432. var bodySize = $(document.body).getSize();
  433. var left = p.x;
  434. if ((left + containerSize.x) > bodySize.x){
  435. left = bodySize.x - containerSize.x;
  436. }
  437. this.container.setStyle("top", p.y+size.y+2);
  438. this.container.setStyle("left", left);
  439. }
  440. // var p = this.container.getPosition();
  441. // var s = this.container.getSize();
  442. // var zidx = this.container.getStyle("z-index");
  443. // this.iframe = new Element("iframe", {"styles":{
  444. // "border": "0px",
  445. // "margin": "0px",
  446. // "padding": "0px",
  447. // "opacity": 0,
  448. // "z-index": (zidx) ? zidx-1 : 0,
  449. // "top": ""+p.y+"px",
  450. // "left": ""+p.x+"px",
  451. // "width": ""+s.x+"px",
  452. // "height": ""+s.y+"px",
  453. // "position": "absolute"
  454. // }}).inject(this.container, "before");
  455. if (layout.desktop.offices){
  456. Object.each(layout.desktop.offices, function(office){
  457. if (this.container.isOverlap(office.officeNode)){
  458. office.hide();
  459. }
  460. }.bind(this));
  461. }
  462. if( this.maskNode ){
  463. this.maskNode.show();
  464. }
  465. // this.morph.start({"opacity": 1}).chain(function(){
  466. this.visible = true;
  467. // }.bind(this));
  468. this.fireEvent("show");
  469. }
  470. },
  471. showYear: function(year){
  472. var thisYear = (year!=undefined) ? year : this.options.baseDate.getFullYear();
  473. var date = new Date(thisYear, 1, 1);
  474. date.increment("year", -2);
  475. var beginYear = date.getFullYear();
  476. date.increment("year", this.yearLength-1);
  477. var endYear = date.getFullYear();
  478. this._setYearTitle(null, beginYear, endYear, thisYear);
  479. this._setYearDate(null, beginYear, endYear, thisYear);
  480. this.showMonthYearButton();
  481. // if (!this.move){
  482. // this.move = true;
  483. // this.containerDrag = new Drag.Move(this.container);
  484. // }
  485. },
  486. _setYearTitle:function(node, beginYear, endYear, thisYear){
  487. var thisNode = node || this.currentTextNode;
  488. thisNode.set("text", beginYear+"-"+endYear);
  489. thisNode.store("year", thisYear);
  490. },
  491. _setYearDate: function(table, beginYear, endYear, year){
  492. var yearTable = table || this.contentYearTable;
  493. var thisYear = (year!=undefined) ? year : this.options.baseDate.getFullYear();
  494. var tbody = yearTable.getElement("tbody");
  495. var tds = tbody.getElements("td");
  496. tds.each(function(item, idx){
  497. var y = beginYear+idx;
  498. item.set("text", y);
  499. item.store("year", y);
  500. if (y==this.options.baseDate.getFullYear()){
  501. item.addClass("current_"+this.options.style);
  502. }else{
  503. item.removeClass("current_"+this.options.style);
  504. }
  505. }.bind(this));
  506. },
  507. showMonth: function(year, month){
  508. var thisYear = (year!=undefined) ? year : this.options.baseDate.getFullYear();
  509. var thisMonth = (month!=undefined) ? month : this.options.baseDate.getMonth();
  510. this._setMonthTitle(null, thisYear, thisMonth);
  511. this._setMonthDate(null, thisYear, thisMonth);
  512. this.showMonthYearButton();
  513. // if (!this.move){
  514. // this.move = true;
  515. // this.containerDrag = new Drag.Move(this.container);
  516. // }
  517. },
  518. _setMonthTitle:function(node, year){
  519. var thisYear = (year!=undefined) ? year : this.options.baseDate.getFullYear();
  520. var thisNode = node || this.currentTextNode;
  521. thisNode.set("text", thisYear);
  522. thisNode.store("year", thisYear);
  523. },
  524. _setMonthDate: function(table, year, month){
  525. //var months = Locale.get("Date").months;
  526. var months = o2.LP.widget.months;
  527. var monthTable = table || this.contentMonthTable;
  528. var thisYear = (year!=undefined) ? year : this.options.baseDate.getFullYear();
  529. var thisMonth = (month!=undefined) ? month : this.options.baseDate.getMonth();
  530. var tbody = monthTable.getElement("tbody");
  531. var tds = tbody.getElements("td");
  532. tds.each(function(item, idx){
  533. item.set("text", months[idx].substr(0,2));
  534. item.store("year", thisYear);
  535. item.store("month", idx);
  536. if ((thisYear==this.options.baseDate.getFullYear()) && (idx==this.options.baseDate.getMonth())){
  537. item.addClass("current_"+this.options.style);
  538. }else{
  539. item.removeClass("current_"+this.options.style);
  540. }
  541. }.bind(this));
  542. },
  543. showDay: function(year, month){
  544. this._setDayTitle(null, year, month);
  545. this._setDayWeekTitleTh();
  546. this._setDayDate(null, year, month);
  547. // if (!this.move){
  548. // this.move = true;
  549. // this.containerDrag = new Drag.Move(this.container);
  550. // }
  551. },
  552. _setDayTitle: function(node, year, month){
  553. var thisYear = (year!=undefined) ? year : this.options.baseDate.getFullYear();
  554. var thisMonth = (month!=undefined) ? month : this.options.baseDate.getMonth();
  555. thisMonth++;
  556. var text = thisYear+"年"+thisMonth+"月";
  557. var thisNode = node || this.currentTextNode;
  558. thisNode.set("text", text);
  559. thisNode.store("year", thisYear);
  560. thisNode.store("month", thisMonth);
  561. },
  562. _setDayDate: function(table, year, month){
  563. var dayTable = table || this.contentTable;
  564. var baseDate = this.options.baseDate;
  565. if ((year!=undefined) && (month!=undefined)){
  566. baseDate = new Date();
  567. baseDate.setDate(1);
  568. baseDate.setFullYear(year);
  569. baseDate.setMonth(month);
  570. }
  571. var tbody = dayTable.getElement("tbody");
  572. var tds = tbody.getElements("td");
  573. var firstDate = baseDate.clone();
  574. firstDate.setDate(1);
  575. var day = firstDate.getDay();
  576. var tmpDate = firstDate.clone();
  577. for (var i=day-1; i>=0; i--){
  578. tmpDate.increment("day", -1);
  579. tds[i].set("text", tmpDate.getDate());
  580. tds[i].addClass("gray_"+this.options.style);
  581. tds[i].setStyles(this.css["gray_"+this.options.style]);
  582. tds[i].store("dateValue", tmpDate.toString())
  583. }
  584. for (var i=day; i<tds.length; i++){
  585. tds[i].set("text", firstDate.getDate());
  586. if (firstDate.toString() == this.options.baseDate.toString()){
  587. tds[i].addClass("current_"+this.options.style);
  588. tds[i].setStyles(this.css["current_"+this.options.style]);
  589. tds[i].removeClass("past_"+this.options.style);
  590. tds[i].removeClass("gray_"+this.options.style);
  591. tds[i].setStyle("border", "1px solid #FFF");
  592. }else if (firstDate.getMonth()!=baseDate.getMonth()){
  593. tds[i].addClass("gray_"+this.options.style);
  594. tds[i].setStyles(this.css["gray_"+this.options.style]);
  595. tds[i].removeClass("current_"+this.options.style);
  596. tds[i].removeClass("past_"+this.options.style);
  597. tds[i].setStyle("border", "1px solid #FFF");
  598. }else{
  599. tds[i].setStyles(this.css["normal_"+this.options.style]);
  600. tds[i].removeClass("current_"+this.options.style);
  601. tds[i].removeClass("gray_"+this.options.style);
  602. tds[i].removeClass("past_"+this.options.style);
  603. tds[i].setStyle("border", "1px solid #FFF");
  604. }
  605. var tmp = firstDate.clone();
  606. if (tmp.clearTime().toString() == this.today.clearTime().toString()){
  607. tds[i].addClass("today_"+this.options.style);
  608. tds[i].removeClass("past_"+this.options.style);
  609. tds[i].setStyles(this.css["today_"+this.options.style]);
  610. tds[i].setStyle("border", "0px solid #AAA");
  611. }
  612. if (tmp.diff(this.today)>0){
  613. if (this.css["past_"+this.options.style]) tds[i].setStyles(this.css["past_"+this.options.style]);
  614. tds[i].addClass("past_"+this.options.style);
  615. }
  616. tds[i].store("dateValue", firstDate.toString())
  617. firstDate.increment("day", 1);
  618. }
  619. },
  620. changeViewToTime: function(date){
  621. this.currentView = "time";
  622. if (!this.contentTimeTable){
  623. this.contentTimeTable = this.createContentTable();
  624. this.contentTimeTable.inject(this.contentDateNode);
  625. }
  626. if (this.contentTable) this.contentTable.setStyle("display", "none");
  627. if (this.contentYearTable) this.contentYearTable.setStyle("display", "none");
  628. if (this.contentMonthTable) this.contentMonthTable.setStyle("display", "none");
  629. if (this.contentTimeTable) this.contentTimeTable.setStyle("display", "block");
  630. // if (this.contentTimeTable) this.contentTimeTable.setStyle("display", "table");
  631. var thisDate = date || this.options.baseDate;
  632. this.showTime(thisDate);
  633. this.hideMonthYearButton();
  634. },
  635. showTime: function(date){
  636. var thisHour = (date || this.options.baseDate).getHours();
  637. var thisMinutes = (date || this.options.baseDate).getMinutes();
  638. var thisSeconds = (date || this.options.baseDate).getSeconds();
  639. // var times = this.options.defaultTime.split(":");
  640. //
  641. // var thisHour = (times[0]) ? times[0] : "0";
  642. // var thisMinutes = (times[1]) ? times[1] : "0";
  643. // var thisSeconds = (times[2]) ? times[2] : "0";
  644. this._setTimeTitle(null, date);
  645. if( this.options.style.indexOf("mobile") > -1 ){
  646. this._setTimeDate_mobile(null, thisHour, thisMinutes, thisSeconds);
  647. }else{
  648. this._setTimeDate(null, thisHour, thisMinutes, thisSeconds);
  649. }
  650. // if (this.move){
  651. // this.move = false;
  652. // this.container.removeEvents("mousedown");
  653. // }
  654. },
  655. _setTimeTitle: function(node, date){
  656. var thisDate = date || this.options.baseDate;
  657. var thisNode = node || this.currentTextNode;
  658. var y = thisDate.getFullYear();
  659. var m = thisDate.getMonth()+1;
  660. var d = thisDate.getDate();
  661. var text = "" + y + "年" + m + "月" + d + "日";
  662. if (this.options.timeOnly){
  663. thisNode.hide();
  664. if (this.prevNode) this.prevNode.hide();
  665. if (this.nextNode) this.nextNode.hide();
  666. }
  667. thisNode.set("text", text);
  668. thisNode.store("date", date);
  669. },
  670. _setTimeDate_mobile: function(node, h, m, s){
  671. var _self = this;
  672. this.itmeHNode = this.contentTimeTable.getElement(".MWF_calendar_time_h");
  673. this.itmeMNode = this.contentTimeTable.getElement(".MWF_calendar_time_m");
  674. this.itmeSNode = this.contentTimeTable.getElement(".MWF_calendar_time_s");
  675. this.showActionNode = this.contentTimeTable.getElement(".MWF_calendar_action_show");
  676. var calendar = this;
  677. if( !this.hMobileSelect ){
  678. for( var i=0; i<24; i++ ){
  679. new Element("div",{
  680. "text" : this.addZero(i, 2 ),
  681. "styles" : this.css.calendarTimeSelectItem_mobile
  682. }).inject( this.itmeHNode );
  683. }
  684. this.selectedHour = this.addZero(h, 2 );
  685. this.hMobileSelect = new o2.Calendar.MobileSelect( this.itmeHNode.getParent(), {
  686. "lineHeight" : 40,
  687. "itemSize" : 24,
  688. "itemIndex" : parseInt(h),
  689. "onChange": function(value){
  690. this.selectedHour = this.addZero(value, 2 );
  691. //this.showHNode.set("text", this.addZero(i, 2 ));
  692. //this.itmeHNode.getFirst().set("text", this.addZero(i, 2 ));
  693. }.bind(this)
  694. });
  695. this.hMobileSelect.load();
  696. }
  697. if( !this.mMobileSelect ) {
  698. for (var i = 0; i < 60; i++) {
  699. new Element("div", {
  700. "text": this.addZero(i, 2),
  701. "styles": this.css.calendarTimeSelectItem_mobile
  702. }).inject(this.itmeMNode);
  703. }
  704. this.selectedMinute = this.addZero(m, 2);
  705. this.mMobileSelect = new o2.Calendar.MobileSelect(this.itmeMNode.getParent(), {
  706. "lineHeight": 40,
  707. "itemSize": 60,
  708. "itemIndex": parseInt(m),
  709. "onChange": function (value) {
  710. this.selectedMinute = this.addZero(value, 2);
  711. //this.showHNode.set("text", this.addZero(i, 2 ));
  712. //this.itmeHNode.getFirst().set("text", this.addZero(i, 2 ));
  713. }.bind(this)
  714. });
  715. this.mMobileSelect.load();
  716. }
  717. if(this.options.secondEnable ){
  718. if(!this.sMobileSelect){
  719. for( var i=0; i<60; i++ ){
  720. new Element("div",{
  721. "text" : this.addZero(i, 2 ),
  722. "styles" : this.css.calendarTimeSelectItem_mobile
  723. }).inject( this.itmeSNode );
  724. }
  725. this.selectedSecond = this.addZero(s, 2 );
  726. this.sMobileSelect = new o2.Calendar.MobileSelect( this.itmeSNode.getParent(), {
  727. "lineHeight" : 40,
  728. "itemSize" : 60,
  729. "itemIndex" : parseInt(s),
  730. "onChange": function(value){
  731. this.selectedSecond = this.addZero(value, 2 );
  732. //this.showHNode.set("text", this.addZero(i, 2 ));
  733. //this.itmeHNode.getFirst().set("text", this.addZero(i, 2 ));
  734. }.bind(this)
  735. });
  736. this.sMobileSelect.load();
  737. }
  738. }else{
  739. this.itmeSNode.hide();
  740. }
  741. if( this.options.secondEnable ){
  742. this.contentTimeTable.getElements(".calendarTimeWheel_mobile").setStyle("width","33.3%");
  743. }else{
  744. this.contentTimeTable.getElements(".calendarTimeWheel_mobile").setStyle("width","50%");
  745. }
  746. if( this.options.secondEnable && this.showSNode ){
  747. this.showSNode.set("text", this.addZero( s.toInt(), 2) );
  748. }
  749. if (!this.okButton){
  750. this.okButton = new Element("button", {"text": "确定"}).inject(this.showActionNode);
  751. this.okButton.addEvent("click", function(){
  752. this._selectTime();
  753. this.hide();
  754. }.bind(this));
  755. this.okButton.setStyles(this.css.calendarActionShowButton_mobile_ok);
  756. }
  757. if (!this.clearButton){
  758. this.clearButton = new Element("button", {"text": "清除"}).inject(this.showActionNode);
  759. this.clearButton.addEvent("click", function(){
  760. this.node.set("value", "");
  761. this.fireEvent("clear");
  762. this.hide();
  763. }.bind(this));
  764. this.clearButton.setStyles(this.css.calendarActionShowButton_mobile_cancel);
  765. }
  766. },
  767. _setTimeDate: function(node, h, m, s){
  768. debugger;
  769. if( !this.options.secondEnable ){
  770. var div = this.contentTimeTable.getElement(".MWF_calendar_time_s");
  771. if( div )div.hide();
  772. div = this.contentTimeTable.getElement(".MWF_calendar_time_show_s");
  773. if( div )div.hide();
  774. }
  775. this.itmeHNode = this.contentTimeTable.getElement(".MWF_calendar_time_h_slider");
  776. this.itmeMNode = this.contentTimeTable.getElement(".MWF_calendar_time_m_slider");
  777. this.itmeSNode = this.contentTimeTable.getElement(".MWF_calendar_time_s_slider");
  778. this.timeShowNode = this.contentTimeTable.getElement(".MWF_calendar_time_show");
  779. this.timeShowNode.addEvent("click", function(){
  780. this._selectTime();
  781. }.bind(this));
  782. this.showHNode = this.contentTimeTable.getElement(".MWF_calendar_time_show_h");
  783. this.showMNode = this.contentTimeTable.getElement(".MWF_calendar_time_show_m");
  784. this.showSNode = this.contentTimeTable.getElement(".MWF_calendar_time_show_s");
  785. this.showActionNode = this.contentTimeTable.getElement(".MWF_calendar_action_show");
  786. var calendar = this;
  787. if ( COMMON.Browser.Platform.isMobile ){
  788. //this.itmeHNode.empty();
  789. //this.itmeHNode.removeClass("calendarTimeSlider");
  790. //this.itmeHNode.setStyles(this.css.calendarTimeSliderNoStyle);
  791. //var sel = new Element("select").inject(this.itmeHNode);
  792. //for (i=0; i<=23; i++){
  793. // var v = (i<10) ? "0"+i: i;
  794. // var o = new Element("option", {
  795. // "value": v,
  796. // "text": v
  797. // }).inject(sel);
  798. // if (h==i) o.set("selected", true);
  799. //}
  800. //sel.addEvent("change", function(){
  801. // calendar.showHNode.set("text", this.options[this.selectedIndex].get("value"));
  802. //});
  803. //this.showHNode.set("text", sel.options[sel.selectedIndex].get("value"));
  804. //
  805. //this.itmeMNode.empty();
  806. //this.itmeMNode.removeClass("calendarTimeSlider");
  807. //this.itmeMNode.setStyles(this.css.calendarTimeSliderNoStyle);
  808. //sel = new Element("select").inject(this.itmeMNode);
  809. //for (i=0; i<=59; i++){
  810. // var v = (i<10) ? "0"+i: i;
  811. // var o = new Element("option", {
  812. // "value": v,
  813. // "text": v
  814. // }).inject(sel);
  815. // if (m==i) o.set("selected", true);
  816. //}
  817. //sel.addEvent("change", function(){
  818. // calendar.showMNode.set("text", this.options[this.selectedIndex].get("value"));
  819. //});
  820. //this.showMNode.set("text", sel.options[sel.selectedIndex].get("value"));
  821. }else{
  822. var hSlider = new Slider(this.itmeHNode, this.itmeHNode.getFirst(), {
  823. range: [0, 23],
  824. initialStep: h.toInt(),
  825. onChange: function(value){
  826. var tmp = (value.toInt().toString());
  827. if (tmp.length<2){
  828. tmp = "0"+tmp
  829. }
  830. this.showHNode.set("text", tmp);
  831. this.itmeHNode.getFirst().set("text", tmp);
  832. }.bind(this)
  833. });
  834. this.itmeHNode.getFirst().set("text", h);
  835. var mSlider = new Slider(this.itmeMNode, this.itmeMNode.getFirst(), {
  836. range: [0, 59],
  837. initialStep: m.toInt(),
  838. onChange: function(value){
  839. var tmp = (value.toInt().toString());
  840. if (tmp.length<2){
  841. tmp = "0"+tmp
  842. }
  843. this.showMNode.set("text", tmp);
  844. this.itmeMNode.getFirst().set("text", tmp);
  845. }.bind(this)
  846. });
  847. this.itmeMNode.getFirst().set("text", m);
  848. if( this.options.secondEnable && this.itmeSNode ){
  849. var sSlider = new Slider(this.itmeSNode, this.itmeSNode.getFirst(), {
  850. range: [0, 59],
  851. initialStep: parseInt(s),
  852. onChange: function(value){
  853. var tmp = (value.toInt().toString());
  854. if (tmp.length<2){
  855. tmp = "0"+tmp
  856. }
  857. this.showSNode.set("text", tmp);
  858. this.itmeSNode.getFirst().set("text", tmp);
  859. }.bind(this)
  860. });
  861. this.itmeSNode.getFirst().set("text", s);
  862. }
  863. }
  864. this.showHNode.set("text", this.addZero( h.toInt(), 2) );
  865. this.showMNode.set("text", this.addZero( m.toInt(), 2));
  866. if( this.options.secondEnable && this.showSNode ){
  867. this.showSNode.set("text", this.addZero( s.toInt(), 2) );
  868. }
  869. if (!this.okButton){
  870. this.okButton = new Element("button", {"text": "确定"}).inject(this.showActionNode);
  871. this.okButton.addEvent("click", function(){
  872. this._selectTime();
  873. this.hide();
  874. }.bind(this));
  875. this.okButton.setStyles(this.css.calendarActionShowButton);
  876. }
  877. if (!this.clearButton){
  878. this.clearButton = new Element("button", {"text": "清除"}).inject(this.showActionNode);
  879. this.clearButton.addEvent("click", function(){
  880. this.node.set("value", "");
  881. this.fireEvent("clear");
  882. this.hide();
  883. }.bind(this));
  884. this.clearButton.setStyles(this.css.calendarActionShowButton);
  885. }
  886. },
  887. addZero : function( str, length ){
  888. var zero = "";
  889. str = str.toString();
  890. for( var i=0; i<length; i++ ){
  891. zero = zero + "0";
  892. }
  893. var s = zero + str;
  894. return s.substr(s.length - length, length );
  895. },
  896. _selectTime: function(){
  897. var date = this.currentTextNode.retrieve("date");
  898. var h = this.selectedHour || this.showHNode.get("text");
  899. var m = this.selectedMinute || this.showMNode.get("text");
  900. date.setHours(h);
  901. date.setMinutes(m);
  902. if( this.options.secondEnable && ( this.selectedSecond || this.showSNode) ){
  903. var s = this.selectedSecond || this.showSNode.get("text");
  904. date.setSeconds(s);
  905. }
  906. if (!this.options.beforeCurrent){
  907. var now = new Date();
  908. if (date.getTime()-now.getTime()<0){
  909. alert("选择的日期必须大于当前日期!");
  910. this.node.focus();
  911. return false;
  912. }
  913. }
  914. var dv = date.format(this.options.format);
  915. if (this.fireEvent("queryComplate", [dv, date])){
  916. var t = this.node.get("value");
  917. this.options.defaultTime = ""+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
  918. this.node.set("value", dv);
  919. // this.node.focus();
  920. this.hide();
  921. if (t!=dv) this.fireEvent("change", [dv, date, t]);
  922. this.fireEvent("complate", [dv, date]);
  923. }
  924. },
  925. _selectDate: function(dateStr){
  926. var date = new Date(dateStr);
  927. this.options.baseDate = date;
  928. var dv = date.format(this.options.format);
  929. if (this.options.isTime){
  930. this.changeViewToTime(date);
  931. }else{
  932. if (!this.options.beforeCurrent){
  933. var now = new Date();
  934. date.setHours(23,59,59);
  935. if (date.getTime()-now.getTime()<0){
  936. alert("选择的日期必须大于当前日期!");
  937. this.node.focus();
  938. return false;
  939. }
  940. }
  941. if (this.fireEvent("queryComplate", [dv, date])){
  942. var t = this.node.get("value");
  943. this.node.set("value", dv);
  944. this.hide();
  945. if (t!=dv) this.fireEvent("change", [dv, date, t]);
  946. this.fireEvent("complate", [dv, date, t]);
  947. }
  948. }
  949. },
  950. _setDayWeekTitleTh: function(table){
  951. var dayTable = table || this.contentTable;
  952. var thead = dayTable.getElement("thead");
  953. var cells = thead.getElements("th");
  954. if (this.css.calendarDaysContentTh) cells.setStyles(this.css.calendarDaysContentTh);
  955. //var days_abbr = Locale.get("Date").days_abbr;
  956. var days_abbr = o2.LP.widget.days_abbr;
  957. cells.each(function(item, idx){
  958. item.set("text", days_abbr[idx]);
  959. });
  960. return cells;
  961. },
  962. createContainer: function(){
  963. var div = null;
  964. var request = new Request.HTML({
  965. url: this.options.containerPath,
  966. method: "GET",
  967. async: false,
  968. onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript){
  969. div = responseTree[0];
  970. }
  971. });
  972. request.send();
  973. //this.containerNode = div.getElement(".MWF_calendar_container");
  974. this.titleNode = div.getElement(".MWF_calendar_title");
  975. this.prevNode = div.getElement(".MWF_calendar_prev");
  976. this.currentNode = div.getElement(".MWF_calendar_current");
  977. this.currentTextNode = div.getElement(".MWF_calendar_currentText");
  978. this.nextNode = div.getElement(".MWF_calendar_next");
  979. this.contentNode = div.getElement(".MWF_calendar_content");
  980. this.contentDateNode = div.getElement(".MWF_calendar_content_date");
  981. this.contentTimeNode = div.getElement(".MWF_calendar_content_time");
  982. this.buttonArea = div.getElement(".MWF_calendar_button_area");
  983. this.bottomNode = div.getElement(".MWF_calendar_bottom");
  984. div.setStyles(this.css.container);
  985. this.titleNode.setStyles(this.css.dateTitle);
  986. this.prevNode.setStyles(this.css.datePrev);
  987. this.currentNode.setStyles(this.css.dateCurrent);
  988. this.currentTextNode.setStyles(this.css.dateCurrentText);
  989. this.nextNode.setStyles(this.css.dateNext);
  990. this.contentNode.setStyles(this.css.calendarContent);
  991. if(this.buttonArea)this.buttonArea.setStyles(this.css.buttonArea);
  992. this.bottomNode.setStyles(this.css.dateBottom);
  993. return div;
  994. },
  995. createContentTable: function(){
  996. var table = null;
  997. var request = new Request.HTML({
  998. url: this.options[this.currentView+"Path"],
  999. method: "GET",
  1000. async: false,
  1001. onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript){
  1002. table = responseTree[0];
  1003. }
  1004. });
  1005. request.send();
  1006. var tbody = table.getElement("tbody");
  1007. if (tbody){
  1008. var tds = tbody.getElements("td");
  1009. var calendar = this;
  1010. tds.addEvent("click", function(){
  1011. switch (calendar.currentView) {
  1012. case "day" :
  1013. calendar._selectDate(this.retrieve("dateValue"), this);
  1014. break;
  1015. case "month" :
  1016. calendar.changeViewToDay(this.retrieve("year"), this.retrieve("month"));
  1017. break;
  1018. case "year" :
  1019. calendar.changeViewToMonth(this.retrieve("year"));
  1020. break;
  1021. case "time" :
  1022. //nothing
  1023. break;
  1024. default :
  1025. //nothing;
  1026. }
  1027. });
  1028. switch (this.currentView) {
  1029. case "day" :
  1030. if (!table.display) table.display="";
  1031. if (!table.style.display) table.style.display="";
  1032. table.setStyles(this.css.calendarDaysContent);
  1033. tds.setStyles(this.css.calendarDaysContentTd);
  1034. break;
  1035. case "month" :
  1036. table.setStyles(this.css.calendarMonthsContent);
  1037. tds.setStyles(this.css.calendarMonthsContentTd);
  1038. break;
  1039. case "year" :
  1040. this.yearLength = tds.length;
  1041. table.setStyles(this.css.calendarYearsContent);
  1042. tds.setStyles(this.css.calendarYearsContentTd);
  1043. break;
  1044. case "time" :
  1045. if( this.options.style.indexOf("mobile") > -1 ){
  1046. var nodes = table.getElements(".calendarTimeContent_mobile");
  1047. if (nodes.length) nodes.setStyles(this.css.calendarTimeContent_mobile);
  1048. nodes = table.getElements(".calendarTimeFixWidthNode_mobile");
  1049. if (nodes.length) nodes.setStyles(this.css.calendarTimeFixWidthNode_mobile);
  1050. nodes = table.getElements(".calendarTimeWheels_mobile");
  1051. if (nodes.length) nodes.setStyles(this.css.calendarTimeWheels_mobile);
  1052. nodes = table.getElements(".calendarTimeWheel_mobile");
  1053. if (nodes.length) nodes.setStyles(this.css.calendarTimeWheel_mobile);
  1054. nodes = table.getElements(".calendarTimeSelectContainer_mobile");
  1055. if (nodes.length) nodes.setStyles(this.css.calendarTimeSelectContainer_mobile);
  1056. nodes = table.getElements(".calendarTimeSelectLine_mobile");
  1057. if (nodes.length) nodes.setStyles(this.css.calendarTimeSelectLine_mobile);
  1058. nodes = table.getElements(".calendarTimeShadowMask_mobile");
  1059. if (nodes.length) nodes.setStyles(this.css.calendarTimeShadowMask_mobile);
  1060. var node = table.getElement(".MWF_calendar_action_show");
  1061. if (node){
  1062. node.setStyles(this.css.calendarActionShow);
  1063. //var buttons = node.getElements("button");
  1064. //buttons.setStyles(this.css.calendarActionShowButton);
  1065. }
  1066. }else{
  1067. var nodes = table.getElements(".calendarTimeArea");
  1068. if (nodes.length) nodes.setStyles(this.css.calendarTimeArea);
  1069. nodes = table.getElements(".calendarTimeSlider");
  1070. if (nodes.length) nodes.setStyles(this.css.calendarTimeSlider);
  1071. nodes = table.getElements(".calendarTimeSliderKnob");
  1072. if (nodes.length) nodes.setStyles(this.css.calendarTimeSliderKnob);
  1073. nodes = table.getElements(".calendarTimeShow");
  1074. if (nodes.length) nodes.setStyles(this.css.calendarTimeShow);
  1075. nodes = table.getElements(".calendarTimeShowItem");
  1076. if (nodes.length) nodes.setStyles(this.css.calendarTimeShowItem);
  1077. var node = table.getElement(".MWF_calendar_action_show");
  1078. if (node){
  1079. node.setStyles(this.css.calendarActionShow);
  1080. var buttons = node.getElements("button");
  1081. buttons.setStyles(this.css.calendarActionShowButton);
  1082. }
  1083. }
  1084. break;
  1085. default :
  1086. //nothing;
  1087. }
  1088. tds.addEvent("mouseover", function(){
  1089. this.setStyle("border", "1px solid #999999");
  1090. });
  1091. tds.addEvent("mouseout", function(){
  1092. this.setStyle("border", "1px solid #FFF");
  1093. });
  1094. }else{
  1095. switch (this.currentView) {
  1096. case "day" :
  1097. table.setStyles(this.css.calendarDaysContent);
  1098. tds.setStyles(this.css.calendarDaysContentTd);
  1099. break;
  1100. case "month" :
  1101. table.setStyles(this.css.calendarMonthsContent);
  1102. tds.setStyles(this.css.calendarMonthsContentTd);
  1103. break;
  1104. case "year" :
  1105. this.yearLength = tds.length;
  1106. table.setStyles(this.css.calendarYearsContent);
  1107. tds.setStyles(this.css.calendarYearsContentTd);
  1108. break;
  1109. case "time" :
  1110. if( this.options.style.indexOf("mobile") > -1 ){
  1111. var nodes = table.getElements(".calendarTimeContent_mobile");
  1112. if (nodes.length) nodes.setStyles(this.css.calendarTimeContent_mobile);
  1113. nodes = table.getElements(".calendarTimeFixWidthNode_mobile");
  1114. if (nodes.length) nodes.setStyles(this.css.calendarTimeFixWidthNode_mobile);
  1115. nodes = table.getElements(".calendarTimeWheels_mobile");
  1116. if (nodes.length) nodes.setStyles(this.css.calendarTimeWheels_mobile);
  1117. nodes = table.getElements(".calendarTimeWheel_mobile");
  1118. if (nodes.length) nodes.setStyles(this.css.calendarTimeWheel_mobile);
  1119. nodes = table.getElements(".calendarTimeSelectContainer_mobile");
  1120. if (nodes.length) nodes.setStyles(this.css.calendarTimeSelectContainer_mobile);
  1121. nodes = table.getElements(".calendarTimeSelectLine_mobile");
  1122. if (nodes.length) nodes.setStyles(this.css.calendarTimeSelectLine_mobile);
  1123. nodes = table.getElements(".calendarTimeShadowMask_mobile");
  1124. if (nodes.length) nodes.setStyles(this.css.calendarTimeShadowMask_mobile);
  1125. var node = table.getElement(".MWF_calendar_action_show");
  1126. if (node){
  1127. node.setStyles(this.css.calendarActionShow);
  1128. //var buttons = node.getElements("button");
  1129. //buttons.setStyles(this.css.calendarActionShowButton);
  1130. }
  1131. }else{
  1132. var nodes = table.getElements(".calendarTimeArea");
  1133. if (nodes.length) nodes.setStyles(this.css.calendarTimeArea);
  1134. nodes = table.getElements(".calendarTimeSlider");
  1135. if (nodes.length) nodes.setStyles(this.css.calendarTimeSlider);
  1136. nodes = table.getElements(".calendarTimeSliderKnob");
  1137. if (nodes.length) nodes.setStyles(this.css.calendarTimeSliderKnob);
  1138. nodes = table.getElements(".calendarTimeShow");
  1139. if (nodes.length) nodes.setStyles(this.css.calendarTimeShow);
  1140. nodes = table.getElements(".calendarTimeShowItem");
  1141. if (nodes.length) nodes.setStyles(this.css.calendarTimeShowItem);
  1142. var node = table.getElement(".MWF_calendar_action_show");
  1143. if (node){
  1144. node.setStyles(this.css.calendarActionShow);
  1145. var buttons = node.getElements("button");
  1146. buttons.setStyles(this.css.calendarActionShowButton);
  1147. }
  1148. }
  1149. break;
  1150. default :
  1151. //nothing;
  1152. }
  1153. }
  1154. return table;
  1155. }
  1156. });
  1157. o2.Calendar.MobileSelect = new Class({
  1158. Implements: [Options, Events],
  1159. options: {
  1160. "lineHeight" : 40, //每个item的高度
  1161. "itemSize" : 0, //item数量
  1162. "ratio" : 1, //滑动距离倍率
  1163. "itemIndex" : 0
  1164. },
  1165. initialize: function (wheelNode, options) {
  1166. this.setOptions( options );
  1167. this.wheelNode = wheelNode;
  1168. this.sliderNode = wheelNode.getFirst();
  1169. },
  1170. load : function(){
  1171. var _this = this;
  1172. this.curDistance = 0;
  1173. this.sliderNode.style.transform = "translate3d(0px, 80px, 0px)";
  1174. this.wheelNode.addEventListener('touchstart', function () {
  1175. _this.touch(event);
  1176. }, false);
  1177. this.wheelNode.addEventListener('touchend', function () {
  1178. _this.touch(event);
  1179. }, false);
  1180. this.wheelNode.addEventListener('touchmove', function () {
  1181. _this.touch(event);
  1182. }, false);
  1183. this.locatePostion( this.options.itemIndex );
  1184. },
  1185. touch: function (ev) {
  1186. var sliderNode = this.sliderNode;
  1187. ev = ev || window.event;
  1188. switch (ev.type) {
  1189. case "touchstart":
  1190. this.startTime = new Date();
  1191. this.startY = event.touches[0].clientY;
  1192. this.oldMoveY = this.startY;
  1193. break;
  1194. case "touchend":
  1195. this.moveEndY = event.changedTouches[0].clientY;
  1196. this.overTime = new Date();
  1197. var speed = (this.moveEndY - this.startY) / ( this.overTime - this.startTime );
  1198. var ratio = 1;
  1199. if( Math.abs(speed) > 0.7 ){
  1200. ratio = 5;
  1201. }else if( Math.abs(speed) < 0.2 ){
  1202. ratio = 0.7
  1203. }
  1204. this.offsetSum = ( this.moveEndY - this.startY ) * this.options.ratio * ratio;
  1205. this.updateCurDistance();
  1206. this.curDistance = this.fixPosition(this.curDistance);
  1207. this.movePosition( this.curDistance );
  1208. this.oversizeBorder = - ( this.options.itemSize - 3) * this.options.lineHeight;
  1209. if (this.curDistance + this.offsetSum > 2 * this.options.lineHeight) {
  1210. this.curDistance = 2 * this.options.lineHeight;
  1211. setTimeout(function () {
  1212. this.movePosition( this.curDistance );
  1213. }.bind(this), 100);
  1214. } else if (this.curDistance + this.offsetSum < this.oversizeBorder) {
  1215. this.curDistance = this.oversizeBorder;
  1216. setTimeout(function () {
  1217. this.movePosition( this.curDistance );
  1218. }.bind(this), 100);
  1219. }
  1220. this.fireEvent( "change", [this.getCurIndex()] );
  1221. break;
  1222. case "touchmove":
  1223. ev.preventDefault();
  1224. this.moveY = event.touches[0].clientY;
  1225. this.overTime = new Date();
  1226. var speed = (this.moveY - this.oldMoveY) / ( this.overTime - this.oldOverTime );
  1227. var ratio = 1;
  1228. if( Math.abs(speed) > 0.7 ){
  1229. ratio = 5;
  1230. }else if( Math.abs(speed) < 0.2 ){
  1231. ratio = 0.7
  1232. }
  1233. this.offset = ( this.moveY - this.oldMoveY ) * this.options.ratio * ratio;
  1234. this.updateCurDistance();
  1235. this.curDistance = this.curDistance + this.offset;
  1236. this.movePosition( this.curDistance );
  1237. this.oldMoveY = this.moveY;
  1238. this.oldOverTime = this.overTime;
  1239. break;
  1240. }
  1241. },
  1242. calcDistance: function (index) {
  1243. return 2 * this.options.lineHeight - index * this.options.lineHeight;
  1244. },
  1245. setCurDistance: function ( index ) {
  1246. this.curDistance = this.calcDistance( index );
  1247. this.movePosition( this.curDistance );
  1248. },
  1249. fixPosition: function (distance) {
  1250. return -(this.getIndex(distance) - 2) * this.options.lineHeight;
  1251. },
  1252. getCurIndex : function(){
  1253. return this.getIndex( this.curDistance );
  1254. },
  1255. getIndex: function (distance) {
  1256. return Math.round((2 * this.options.lineHeight - distance) / this.options.lineHeight);
  1257. },
  1258. movePosition: function ( distance) {
  1259. this.sliderNode.style.webkitTransform = 'translate3d(0,' + distance + 'px, 0)';
  1260. this.sliderNode.style.transform = 'translate3d(0,' + distance + 'px, 0)';
  1261. },
  1262. locatePostion: function ( index ) {
  1263. this.curDistance = this.calcDistance(index);
  1264. this.movePosition( this.curDistance );
  1265. },
  1266. updateCurDistance: function () {
  1267. this.curDistance = parseInt(this.sliderNode.style.transform.split(',')[1]);
  1268. },
  1269. getDistance: function () {
  1270. return parseInt(this.sliderNode.style.transform.split(',')[1]);
  1271. }
  1272. });