Calendar.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266
  1. MWF.xDesktop.requireApp("process.Xform", "$Input", null, false);
  2. /** @class Calendar 日期组件。
  3. * @example
  4. * //可以在脚本中获取该组件
  5. * //方法1:
  6. * var field = this.form.get("fieldId"); //获取组件对象
  7. * //方法2
  8. * var field = this.target; //在组件本身的脚本中获取,比如事件脚本、默认值脚本、校验脚本等等
  9. * @extends MWF.xApplication.process.Xform.$Input
  10. * @o2category FormComponents
  11. * @o2range {Process|CMS|Portal}
  12. * @hideconstructor
  13. */
  14. MWF.xApplication.process.Xform.Calendar = MWF.APPCalendar = new Class(
  15. /** @lends MWF.xApplication.process.Xform.Calendar# */
  16. {
  17. Implements: [Events],
  18. Extends: MWF.APP$Input,
  19. iconStyle: "calendarIcon",
  20. options: {
  21. /**
  22. * 日期选择完成时触发.
  23. * @event MWF.xApplication.process.Xform.Calendar#complete
  24. * @see {@link https://www.yuque.com/o2oa/ixsnyt/hm5uft#i0zTS|组件事件说明}
  25. */
  26. /**
  27. * 日期选择器上点清空时触发.
  28. * @event MWF.xApplication.process.Xform.Calendar#clear
  29. * @see {@link https://www.yuque.com/o2oa/ixsnyt/hm5uft#i0zTS|组件事件说明}
  30. */
  31. /**
  32. * 值改变时触发.
  33. * @event MWF.xApplication.process.Xform.Calendar#change
  34. * @see {@link https://www.yuque.com/o2oa/ixsnyt/hm5uft#i0zTS|组件事件说明}
  35. */
  36. /**
  37. * 显示日期选择器时触发.
  38. * @event MWF.xApplication.process.Xform.Calendar#show
  39. * @see {@link https://www.yuque.com/o2oa/ixsnyt/hm5uft#i0zTS|组件事件说明}
  40. */
  41. /**
  42. * 隐藏日期选择器时触发.
  43. * @event MWF.xApplication.process.Xform.Calendar#hide
  44. * @see {@link https://www.yuque.com/o2oa/ixsnyt/hm5uft#i0zTS|组件事件说明}
  45. */
  46. "moduleEvents": ["queryLoad","postLoad","load","complete", "clear", "change","show","hide"]
  47. },
  48. _loadNode: function(){
  49. if (this.readonly || this.json.isReadonly){
  50. this._loadNodeRead();
  51. }else{
  52. this._loadNodeEdit();
  53. }
  54. },
  55. setDescriptionEvent: function(){
  56. if (this.descriptionNode){
  57. this.descriptionNode.addEvents({
  58. "mousedown": function(){
  59. this.descriptionNode.setStyle("display", "none");
  60. //this.clickSelect();
  61. }.bind(this)
  62. });
  63. }
  64. },
  65. _getValueAg: function(value,isDate){
  66. if (value && value.isAG){
  67. return value.then(function(v){
  68. this._getValueAg(v, isDate);
  69. }.bind(this), function(){});
  70. }else{
  71. var d = (!!value) ? Date.parse(value) : "";
  72. if (isDate){
  73. return d || null;
  74. }else{
  75. return (d) ? d.format(this.json.format) : "";
  76. }
  77. }
  78. },
  79. getValue: function(isDate){
  80. if (this.moduleValueAG) return this.moduleValueAG;
  81. var value = this._getBusinessData();
  82. if( value && !isDate)return value;
  83. if (!value) value = this._computeValue();
  84. if (value.then) return value;
  85. var d = (!!value) ? Date.parse(value) : "";
  86. if (isDate){
  87. return d || null;
  88. }else{
  89. //if (d) value = Date.parse(value).format(this.json.format);
  90. return (d) ? d.format(this.json.format) : "";
  91. }
  92. return value || "";
  93. },
  94. getValueStr : function(){
  95. var value = this._getBusinessData();
  96. if (!value) value = this._computeValue();
  97. return value;
  98. },
  99. __setValue: function(value){
  100. var v;
  101. if( typeOf( value ) === "date" ){
  102. v = (value) ? ( Date.parse(value)).format(this.json.format) : "";
  103. }else{
  104. v = value;
  105. }
  106. this._setBusinessData(value);
  107. if (this.node.getFirst()) this.node.getFirst().set("value", v || "");
  108. if (this.readonly || this.json.isReadonly) this.node.set("text", v);
  109. this.moduleValueAG = null;
  110. return value;
  111. },
  112. clickSelect: function(){
  113. var _self = this;
  114. if (!this.calendar){
  115. MWF.require("MWF.widget.Calendar", function(){
  116. var options = {
  117. "style": layout.mobile ? "xform_mobile" : "xform",
  118. "secondEnable" : this.json.isSelectSecond,
  119. "isTime": (this.json.selectType==="datetime" || this.json.selectType==="time"),
  120. "timeOnly": (this.json.selectType === "time"),
  121. //"target": this.form.node,
  122. "target": layout.mobile ? $(document.body) : this.form.app.content,
  123. "format": this.json.format,
  124. "onComplate": function(formateDate, date){
  125. this.validationMode();
  126. if(this.validation())this._setBusinessData(this.getInputData("change"));
  127. this.fireEvent("complete");
  128. }.bind(this),
  129. "onChange": function(){
  130. this.fireEvent("change");
  131. }.bind(this),
  132. "onClear": function(){
  133. this.validationMode();
  134. if(this.validation())this._setBusinessData(this.getInputData("change"));
  135. this.fireEvent("clear");
  136. if (!this.node.getFirst().get("value")) if (this.descriptionNode) this.descriptionNode.setStyle("display", "block");
  137. }.bind(this),
  138. "onShow": function(){
  139. if (_self.descriptionNode) _self.descriptionNode.setStyle("display", "none");
  140. if( layout.mobile ){
  141. this.container.position({
  142. relativeTo: $(document.body),
  143. position: 'leftCenter',
  144. edge: 'leftCenter'
  145. //offset : { y : -25 }
  146. });
  147. }else{
  148. var parent = _self.node.getParent();
  149. while( parent ){
  150. var overflow = parent.getStyle("overflow");
  151. var overflowY = parent.getStyle("overflow-y");
  152. if( overflow === "auto" || overflow === "scroll" || overflowY === "auto" || overflowY === "scroll" ){
  153. _self.scrollFun = function( e ){
  154. if (this.container.position ) {
  155. this.container.position({
  156. relativeTo: this.node,
  157. position: 'bottomLeft',
  158. edge: 'upperLeft',
  159. allowNegative : true
  160. });
  161. }
  162. }.bind(this);
  163. _self.scrollParentNode = parent;
  164. parent.addEvent( "scroll", _self.scrollFun );
  165. parent = null;
  166. }else{
  167. parent = parent.getParent();
  168. }
  169. }
  170. }
  171. _self.fireEvent("show");
  172. },
  173. "onHide": function(){
  174. if (!this.node.getFirst().get("value")) if (this.descriptionNode) this.descriptionNode.setStyle("display", "block");
  175. if( _self.scrollParentNode && _self.scrollFun ){
  176. _self.scrollParentNode.removeEvent("scroll", _self.scrollFun);
  177. }
  178. _self.fireEvent("hide");
  179. }.bind(this)
  180. };
  181. options.baseDate = this.getBaseDate();
  182. /**
  183. * @summary 日期弹出选择界面,只读情况下无此成员.
  184. * @member {MWF.widget.Calendar}
  185. * @example
  186. * var calendar = this.form.get("fieldId").calendar; //获取组件
  187. * if(calendar)calendar.show(); //弹出选择组件
  188. */
  189. this.calendar = new MWF.widget.Calendar(this.node.getFirst(), options);
  190. if( this.form.json && this.form.json.canlendarStyle && typeOf( this.form.json.canlendarStyle.zIndex ) !== "null" && typeOf( this.form.json.canlendarStyle.zIndex ) !== "undefined" ){
  191. this.calendar.container.setStyle("z-index", this.form.json.canlendarStyle.zIndex );
  192. }
  193. this.calendar.show();
  194. }.bind(this));
  195. }else{
  196. var options = {};
  197. options.baseDate = this.getBaseDate();
  198. this.calendar.setOptions(options);
  199. //this.calendar.show();
  200. this.node.getFirst().focus();
  201. }
  202. },
  203. getBaseDate : function(){
  204. var d;
  205. var value = this.getValue(true);
  206. if( value && value.getTime() > 10000 ){
  207. d = value;
  208. }else{
  209. var ud = Date.parse( this.unformatDate( this.getValueStr() ) );
  210. if( ud && ud.getTime() > 10000 ){
  211. d = ud;
  212. }else{
  213. d = new Date();
  214. }
  215. }
  216. return d;
  217. },
  218. unformatDate : function( dateStr ){
  219. var formatStr = this.json.format;
  220. var matchArr = [ "%Y", "%m", "%d", "%H", "%M", "%S", "%z", "%Z" ];
  221. var lengthArr = [ 4, 2, 2, 2, 2, 2, 5, 3];
  222. var indexArr = [ formatStr.indexOf("%Y"), formatStr.indexOf("%m"), formatStr.indexOf("%d"), formatStr.indexOf("%H"), formatStr.indexOf("%M"), formatStr.indexOf("%S"), formatStr.indexOf("%z"), formatStr.indexOf("%Z") ];
  223. var resultArr = [ null, null, null, null, null, null, null, null ];
  224. for( var i=0; i<matchArr.length; i++ ){
  225. if( indexArr[i] === -1 )continue;
  226. var leftLength = 0;
  227. var leftUnitLength = 0;
  228. Array.each( indexArr, function( n, k ){
  229. if( n === -1 )return;
  230. if( indexArr[i] > n ){
  231. leftLength += lengthArr[k];
  232. leftUnitLength += matchArr[k].length;
  233. }
  234. });
  235. resultArr[i] = dateStr.substr( indexArr[i] - leftUnitLength + leftLength, lengthArr[i] );
  236. }
  237. var now = new Date();
  238. for( var i=0; i < resultArr.length; i++ ){
  239. if( !resultArr[i] ){
  240. switch ( matchArr[i] ){
  241. case "%Y":
  242. case "%m":
  243. case "%d":
  244. resultArr[i] = now.format( matchArr[i] );
  245. break;
  246. case "%H":
  247. case "%M":
  248. case "%S":
  249. resultArr[i] = "00";
  250. break;
  251. case "%z":
  252. case "%Z":
  253. default:
  254. break;
  255. }
  256. }
  257. }
  258. return resultArr[0] + "-" + resultArr[1] + "-" + resultArr[2] + " " + resultArr[3]+":"+resultArr[4]+":"+resultArr[5];
  259. }
  260. });