ext 只显示年月的日期插件

插件代码：

Js代码

1. Ext.ux.MonthPickerPlugin = function() {    
2.     var picker;    
3.     var oldDateDefaults;    
4.   
5.     this.init = function(pk) {    
6.         picker = pk;    
7.         picker.onTriggerClick = picker.onTriggerClick.createSequence(onClick);    
8.         picker.getValue = picker.getValue.createInterceptor(setDefaultMonthDay).createSequence(restoreDefaultMonthDay);    
9.         picker.beforeBlur = picker.beforeBlur.createInterceptor(setDefaultMonthDay).createSequence(restoreDefaultMonthDay);    
10.     };    
11.   
12.     function setDefaultMonthDay() {    
13.         oldDateDefaults = Date.defaults.d;    
14.         Date.defaults.d = 1;    
15.         return true;    
16.     }    
17.   
18.     function restoreDefaultMonthDay(ret) {    
19.         Date.defaults.d = oldDateDefaults;    
20.         return ret;    
21.     }    
22.   
23.     function onClick(e, el, opt) {    
24.         var p = picker.menu.picker;    
25.         p.activeDate = p.activeDate.getFirstDateOfMonth();    
26.         if (p.value) {    
27.             p.value = p.value.getFirstDateOfMonth();    
28.         }    
29.   
30.         p.showMonthPicker();    
31.             
32.         if (!p.disabled) {    
33.             p.monthPicker.stopFx();    
34.             p.monthPicker.show();    
35.   
36.             p.mun(p.monthPicker, 'click', p.onMonthClick, p);    
37.             p.mun(p.monthPicker, 'dblclick', p.onMonthDblClick, p);    
38.             p.onMonthClick = p.onMonthClick.createSequence(pickerClick);    
39.             p.onMonthDblClick = p.onMonthDblClick.createSequence(pickerDblclick);    
40.             p.mon(p.monthPicker, 'click', p.onMonthClick, p);    
41.             p.mon(p.monthPicker, 'dblclick', p.onMonthDblClick, p);    
42.         }    
43.     }    
44.   
45.     function pickerClick(e, t) {    
46.         var el = new Ext.Element(t);    
47.         if (el.is('button.x-date-mp-cancel')) {    
48.             picker.menu.hide();    
49.         } else if(el.is('button.x-date-mp-ok')) {    
50.             var p = picker.menu.picker;    
51.             p.setValue(p.activeDate);    
52.             p.fireEvent('select', p, p.value);    
53.         }    
54.     }    
55.   
56.     function pickerDblclick(e, t) {    
57.         var el = new Ext.Element(t);    
58.         if (el.parent()    
59.             && (el.parent().is('td.x-date-mp-month')    
60.             || el.parent().is('td.x-date-mp-year'))) {    
61.   
62.             var p = picker.menu.picker;    
63.             p.setValue(p.activeDate);    
64.             p.fireEvent('select', p, p.value);    
65.         }    
66.     }    
67. };    
68.   
69. Ext.preg('monthPickerPlugin', Ext.ux.MonthPickerPlugin);    

Ext.ux.MonthPickerPlugin = function() { 
    var picker; 
    var oldDateDefaults; 

    this.init = function(pk) { 
        picker = pk; 
        picker.onTriggerClick = picker.onTriggerClick.createSequence(onClick); 
        picker.getValue = picker.getValue.createInterceptor(setDefaultMonthDay).createSequence(restoreDefaultMonthDay); 
        picker.beforeBlur = picker.beforeBlur.createInterceptor(setDefaultMonthDay).createSequence(restoreDefaultMonthDay); 
    }; 

    function setDefaultMonthDay() { 
        oldDateDefaults = Date.defaults.d; 
        Date.defaults.d = 1; 
        return true; 
    } 

    function restoreDefaultMonthDay(ret) { 
        Date.defaults.d = oldDateDefaults; 
        return ret; 
    } 

    function onClick(e, el, opt) { 
        var p = picker.menu.picker; 
        p.activeDate = p.activeDate.getFirstDateOfMonth(); 
        if (p.value) { 
            p.value = p.value.getFirstDateOfMonth(); 
        } 

        p.showMonthPicker(); 
         
        if (!p.disabled) { 
            p.monthPicker.stopFx(); 
            p.monthPicker.show(); 

            p.mun(p.monthPicker, 'click', p.onMonthClick, p); 
            p.mun(p.monthPicker, 'dblclick', p.onMonthDblClick, p); 
            p.onMonthClick = p.onMonthClick.createSequence(pickerClick); 
            p.onMonthDblClick = p.onMonthDblClick.createSequence(pickerDblclick); 
            p.mon(p.monthPicker, 'click', p.onMonthClick, p); 
            p.mon(p.monthPicker, 'dblclick', p.onMonthDblClick, p); 
        } 
    } 

    function pickerClick(e, t) { 
        var el = new Ext.Element(t); 
        if (el.is('button.x-date-mp-cancel')) { 
            picker.menu.hide(); 
        } else if(el.is('button.x-date-mp-ok')) { 
            var p = picker.menu.picker; 
            p.setValue(p.activeDate); 
            p.fireEvent('select', p, p.value); 
        } 
    } 

    function pickerDblclick(e, t) { 
        var el = new Ext.Element(t); 
        if (el.parent() 
            && (el.parent().is('td.x-date-mp-month') 
            || el.parent().is('td.x-date-mp-year'))) { 

            var p = picker.menu.picker; 
            p.setValue(p.activeDate); 
            p.fireEvent('select', p, p.value); 
        } 
    } 
}; 

Ext.preg('monthPickerPlugin', Ext.ux.MonthPickerPlugin);  

 

调用例子：

Js代码

1. new Ext.form.DateField({   
2.     renderTo: document.body,   
3.     plugins:'monthPickerPlugin',   
4.     name:'rq',   
5.     format: 'Y-m'  
6. });  

  new Ext.form.DateField({
      renderTo: document.body,
      plugins:'monthPickerPlugin',
      name:'rq',
      format: 'Y-m'
  });