Calendar.js 45 KB

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