首页 > 代码库 > extjs 时间控件只显示年月

extjs 时间控件只显示年月

2024-07-16 12:05:51   225人阅读

调用代码一：

[javascript] view plain copy print ?
  1. var monthField = new Ext.ux.MonthField({     
  2.     id:‘month‘,     
  3.     fieldLabel: ‘月份‘,     
  4.     allowBlank:false,     
  5.  readOnly : true,     
  6.  format:‘Y年m月‘,     
  7.        listeners:{"blur":function(){     
  8.    alert()     
  9.  }}     
  10. );    

 

调用代码二（部分）：

[javascript] view plain copy print ?
  1. fieldLabel:　‘所属日期‘,  
  2. width : 150,  
  3. xtype:　‘monthfield‘,  
  4. name:　‘date‘,  
  5. hiddenName : ‘date‘,  
  6. format:　"Y-m",  
  7. editable　:　false,  
  8. value:new Date().dateFormat(‘Y-m‘),  


 

下面代码全复制做成一个monthPick.js就OK了，页面导入就可以像上面两种使用方法使用

[javascript] view plain copy print ?
  1. //monthPick.js  
  2. //----------------  
  3. Ext.ux.MonthPicker=Ext.extend(Ext.Component,{  
  4.     format:"M-y",  
  5.     okText:Ext.DatePicker.prototype.okText,  
  6.     cancelText:Ext.DatePicker.prototype.cancelText,  
  7.     constrainToViewport:true,  
  8.     monthNames:Date.monthNames,  
  9.     startDay:0,  
  10.     value:0,  
  11.     noPastYears:false,  
  12.     initComponent:function () {  
  13.         Ext.ux.MonthPicker.superclass.initComponent.call(this);  
  14.         this.value=http://www.mamicode.com/this.value?  
  15.         this.value.clearTime():new Date().clearTime();  
  16.         this.addEvents(  
  17.         ‘select‘  
  18.         );  
  19.         if(this.handler) {  
  20.             this.on("select",this.handler,this.scope||this);  
  21.         }  
  22.     },  
  23.     focus:function () {  
  24.         if(this.el) {  
  25.             this.update(this.activeDate);  
  26.         }  
  27.     },  
  28.     onRender:function (container,position) {  
  29.         var m=[‘<div style="width: 200px; height:175px;"></div>‘]  
  30.         m[m.length]=‘<div class="x-date-mp"></div>‘;  
  31.         var el=document.createElement("div");  
  32.         el.className="x-date-picker";  
  33.         el.innerHTML=m.join("");  
  34.         container.dom.insertBefore(el,position);  
  35.         this.el=Ext.get(el);  
  36.         this.monthPicker=this.el.down(‘div.x-date-mp‘);  
  37.         this.monthPicker.enableDisplayMode(‘block‘);  
  38.         this.el.unselectable();  
  39.         this.showMonthPicker();  
  40.         if(Ext.isIE) {  
  41.             this.el.repaint();  
  42.         }  
  43.         this.update(this.value);  
  44.     },  
  45.     createMonthPicker:function () {  
  46.         if(!this.monthPicker.dom.firstChild) {  
  47.             var buf=[‘<table border="0" cellspacing="0">‘];  
  48.             for(var i=0;i<6;i++) {  
  49.                 buf.push(  
  50.                 ‘<tr><td class="x-date-mp-month"><a href=http://www.mamicode.com/"#">‘,this.monthNames[i].substr(0,3),‘</a></td>‘,  
  51.                 ‘<td class="x-date-mp-month x-date-mp-sep"><a href=http://www.mamicode.com/"#">‘,this.monthNames[i+6].substr(0,3),‘</a></td>‘,  
  52.                 i==0?  
  53.                 ‘<td class="x-date-mp-ybtn" align="center"><a class="x-date-mp-prev"></a></td><td class="x-date-mp-ybtn" align="center"><a class="x-date-mp-next"></a></td></tr>‘:  
  54.                 ‘<td class="x-date-mp-year"><a href=http://www.mamicode.com/"#">‘  
  55.                 );  
  56.             }  
  57.             buf.push(  
  58.             ‘<tr class="x-date-mp-btns"><td colspan="4"><button type="button" class="x-date-mp-ok">‘,  
  59.             this.okText,  
  60.             ‘</button><button type="button" class="x-date-mp-cancel">‘,  
  61.             this.cancelText,  
  62.             ‘</button></td></tr>‘,  
  63.             ‘</table>‘  
  64.             );  
  65.             this.monthPicker.update(buf.join(‘‘));  
  66.             this.monthPicker.on(‘click‘,this.onMonthClick,this);  
  67.             this.monthPicker.on(‘dblclick‘,this.onMonthDblClick,this);  
  68.             this.mpMonths=this.monthPicker.select(‘td.x-date-mp-month‘);  
  69.             this.mpYears=this.monthPicker.select(‘td.x-date-mp-year‘);  
  70.             this.mpMonths.each(function (m,a,i) {  
  71.                 i+=1;  
  72.                 if((i%2)==0) {  
  73.                     m.dom.xmonth=5+Math.round(i*.5);  
  74.                 }else {  
  75.                     m.dom.xmonth=Math.round((i-1)*.5);  
  76.                 }  
  77.             });  
  78.         }  
  79.     },  
  80.     showMonthPicker:function () {  
  81.         this.createMonthPicker();  
  82.         var size=this.el.getSize();  
  83.         this.monthPicker.setSize(size);  
  84.         this.monthPicker.child(‘table‘).setSize(size);  
  85.         this.mpSelMonth=(this.activeDate||this.value).getMonth();  
  86.         this.updateMPMonth(this.mpSelMonth);  
  87.         this.mpSelYear=(this.activeDate||this.value).getFullYear();  
  88.         this.updateMPYear(this.mpSelYear);  
  89.         this.monthPicker.show();  
  90.         //this.monthPicker.slideIn(‘t‘, {duration:.2});  
  91.     },  
  92.     updateMPYear:function (y) {  
  93.         if(this.noPastYears) {  
  94.             var minYear=new Date().getFullYear();  
  95.             if(y<(minYear+4)) {  
  96.                 y=minYear+4;  
  97.             }  
  98.         }  
  99.         this.mpyear=y;  
  100.         var ys=this.mpYears.elements;  
  101.         for(var i=1;i<=10;i++) {  
  102.             var td=ys[i-1],y2;  
  103.             if((i%2)==0) {  
  104.                 y2=y+Math.round(i*.5);  
  105.                 td.firstChild.innerHTML=y2;  
  106.                 td.xyear=y2;  
  107.             }else {  
  108.                 y2=y-(5-Math.round(i*.5));  
  109.                 td.firstChild.innerHTML=y2;  
  110.                 td.xyear=y2;  
  111.             }  
  112.             this.mpYears.item(i-1)[y2==this.mpSelYear?‘addClass‘:‘removeClass‘](‘x-date-mp-sel‘);  
  113.         }  
  114.     },  
  115.     updateMPMonth:function (sm) {  
  116.         this.mpMonths.each(function (m,a,i) {  
  117.             m[m.dom.xmonth==sm?‘addClass‘:‘removeClass‘](‘x-date-mp-sel‘);  
  118.         });  
  119.     },  
  120.     selectMPMonth:function (m) {  
  121.     },  
  122.     onMonthClick:function (e,t) {  
  123.         e.stopEvent();  
  124.         var el=new Ext.Element(t),pn;  
  125.         if(el.is(‘button.x-date-mp-cancel‘)) {  
  126.             this.hideMonthPicker();  
  127.             //this.fireEvent("select", this, this.value);  
  128.         }  
  129.         else if(el.is(‘button.x-date-mp-ok‘)) {  
  130.             this.update(new Date(this.mpSelYear,this.mpSelMonth,(this.activeDate||this.value).getDate()));  
  131.             //this.hideMonthPicker();  
  132.             this.fireEvent("select",this,this.value);  
  133.         }  
  134.         else if(pn=el.up(‘td.x-date-mp-month‘,2)) {  
  135.             this.mpMonths.removeClass(‘x-date-mp-sel‘);  
  136.             pn.addClass(‘x-date-mp-sel‘);  
  137.             this.mpSelMonth=pn.dom.xmonth;  
  138.         }  
  139.         else if(pn=el.up(‘td.x-date-mp-year‘,2)) {  
  140.             this.mpYears.removeClass(‘x-date-mp-sel‘);  
  141.             pn.addClass(‘x-date-mp-sel‘);  
  142.             this.mpSelYear=pn.dom.xyear;  
  143.         }  
  144.         else if(el.is(‘a.x-date-mp-prev‘)) {  
  145.             this.updateMPYear(this.mpyear-10);  
  146.         }  
  147.         else if(el.is(‘a.x-date-mp-next‘)) {  
  148.             this.updateMPYear(this.mpyear+10);  
  149.         }  
  150.     },  
  151.     onMonthDblClick:function (e,t) {  
  152.         e.stopEvent();  
  153.         var el=new Ext.Element(t),pn;  
  154.         if(pn=el.up(‘td.x-date-mp-month‘,2)) {  
  155.             this.update(new Date(this.mpSelYear,pn.dom.xmonth,(this.activeDate||this.value).getDate()));  
  156.             //this.hideMonthPicker();  
  157.             this.fireEvent("select",this,this.value);  
  158.         }  
  159.         else if(pn=el.up(‘td.x-date-mp-year‘,2)) {  
  160.             this.update(new Date(pn.dom.xyear,this.mpSelMonth,(this.activeDate||this.value).getDate()));  
  161.             //this.hideMonthPicker();  
  162.             this.fireEvent("select",this,this.value);  
  163.         }  
  164.     },  
  165.     hideMonthPicker:function (disableAnim) {  
  166.         Ext.menu.MenuMgr.hideAll();  
  167.     },  
  168.     showPrevMonth:function (e) {  
  169.         this.update(this.activeDate.add("mo",-1));  
  170.     },  
  171.     showNextMonth:function (e) {  
  172.         this.update(this.activeDate.add("mo",1));  
  173.     },  
  174.     showPrevYear:function () {  
  175.         this.update(this.activeDate.add("y",-1));  
  176.     },  
  177.     showNextYear:function () {  
  178.         this.update(this.activeDate.add("y",1));  
  179.     },  
  180.     update:function (date) {  
  181.         this.activeDate=date;  
  182.         this.value=http://www.mamicode.com/date;
  183.         if(!this.internalRender) {  
  184.             var main=this.el.dom.firstChild;  
  185.             var w=main.offsetWidth;  
  186.             this.el.setWidth(w+this.el.getBorderWidth("lr"));  
  187.             Ext.fly(main).setWidth(w);  
  188.             this.internalRender=true;  
  189.             if(Ext.isOpera&&!this.secondPass) {  
  190.                 main.rows[0].cells[1].style.width=(w-(main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth))+"px";  
  191.                 this.secondPass=true;  
  192.                 this.update.defer(10,this,[date]);  
  193.             }  
  194.         }  
  195.     }  
  196. });  
  197. Ext.reg(‘monthpicker‘,Ext.ux.MonthPicker);  
  198.   
  199. Ext.ux.MonthItem=function (config) {  
  200.     Ext.ux.MonthItem.superclass.constructor .call(this,new Ext.ux.MonthPicker(config),config);  
  201.     this.picker=this.component;  
  202.     this.addEvents(‘select‘);  
  203.     this.picker.on("render",function (picker) {  
  204.         picker.getEl().swallowEvent("click");  
  205.         picker.container.addClass("x-menu-date-item");  
  206.     });  
  207.     this.picker.on("select",this.onSelect,this);  
  208. };  
  209. Ext.extend(Ext.ux.MonthItem,Ext.menu.Adapter,{  
  210.     onSelect:function (picker,date) {  
  211.         this.fireEvent("select",this,date,picker);  
  212.         Ext.ux.MonthItem.superclass.handleClick.call(this);  
  213.     }  
  214. });  
  215. Ext.ux.MonthMenu=function (config) {  
  216.     Ext.ux.MonthMenu.superclass.constructor .call(this,config);  
  217.     this.plain=true;  
  218.     var mi=new Ext.ux.MonthItem(config);  
  219.     this.add(mi);  
  220.     this.picker=mi.picker;  
  221.     this.relayEvents(mi,["select"]);  
  222. };  
  223. Ext.extend(Ext.ux.MonthMenu,Ext.menu.Menu,{  
  224.     cls:‘x-date-menu‘  
  225. });  
  226. Ext.ux.MonthField=function (cfg) {  
  227.     Ext.ux.MonthField.superclass.constructor .call(this,Ext.apply({  
  228.     },cfg||{  
  229.     }));  
  230. }  
  231. Ext.extend(Ext.ux.MonthField,Ext.form.DateField,{  
  232.     format:"Y-m",  
  233.     triggerClass:"x-form-date-trigger",  
  234.     menuListeners:{  
  235.         select:function (m,d) {  
  236.             this.setValue(d.format(this.format));  
  237.         },  
  238.         show:function () {  
  239.             this.onFocus();  
  240.         },  
  241.         hide:function () {  
  242.             this.focus.defer(10,this);  
  243.             var ml=this.menuListeners;  
  244.             this.menu.un("select",ml.select,this);  
  245.             this.menu.un("show",ml.show,this);  
  246.             this.menu.un("hide",ml.hide,this);  
  247.         }  
  248.     },  
  249.     onTriggerClick:function () {  
  250.         if(this.disabled) {  
  251.             return ;  
  252.         }  
  253.         if(this.menu==null) {  
  254.             this.menu=new Ext.ux.MonthMenu();  
  255.         }  
  256.         Ext.apply(this.menu.picker,{  
  257.         });  
  258.         this.menu.on(Ext.apply({  
  259.         },this.menuListeners,{  
  260.             scope:this  
  261.         }));  
  262.         this.menu.show(this.el,"tl-bl?");  
  263.     }  
  264. });  
  265. Ext.reg("monthfield",Ext.ux.MonthField);  


联系
我们