ext2，3,和4 版本只显示年月的日期插件

来源：互联网发布：武汉编程辅导班编辑：程序博客网时间：2024/06/06 13:17

ext2，3,和4 版本只显示年月的日期插件

1：ext3版本插件

来自官方论坛：http://www.sencha.com/forum/showthread.php?74002-3.x-Ext.ux.MonthMenu

插件代码：

Java代码  
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);    

调用例子：

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

2：Ext2版本（测试2.0.2成功）

插件代码见附件

使用例子：

引入： <script type="text/javascript" src="DatePicker.js"></script>
<script type="text/javascript" src="DateField.js"></script>

Java代码  
{  
                                    xtype : "datefield",  
                                    fieldLabel : "date",  
                                    format:'Y-m'  
                                }  

效果图：

3:Ext4版本年月插件：

Java代码  
/** Months picker 
      重写 field.Date 
**/  
Ext.define('Ext.form.field.Month', {  
   extend:'Ext.form.field.Date',  
   alias: 'widget.monthfield',  
   requires: ['Ext.picker.Month'],  
   alternateClassName: ['Ext.form.MonthField', 'Ext.form.Month'],  
   selectMonth: null,  
   createPicker: function() {  
       var me = this,  
           format = Ext.String.format;  
       return Ext.create('Ext.picker.Month', {  
           pickerField: me,  
           ownerCt: me.ownerCt,  
           renderTo: document.body,  
           floating: true,  
           hidden: true,  
           focusOnShow: true,  
           minDate: me.minValue,  
           maxDate: me.maxValue,  
           disabledDatesRE: me.disabledDatesRE,  
           disabledDatesText: me.disabledDatesText,  
           disabledDays: me.disabledDays,  
           disabledDaysText: me.disabledDaysText,  
           format: me.format,  
           showToday: me.showToday,  
           startDay: me.startDay,  
           minText: format(me.minText, me.formatDate(me.minValue)),  
           maxText: format(me.maxText, me.formatDate(me.maxValue)),  
           listeners: {   
       select:        { scope: me,   fn: me.onSelect     },   
       monthdblclick: { scope: me,   fn: me.onOKClick     },      
       yeardblclick:  { scope: me,   fn: me.onOKClick     },  
       OkClick:       { scope: me,   fn: me.onOKClick     },      
       CancelClick:   { scope: me,   fn: me.onCancelClick }          
           },  
           keyNavConfig: {  
               esc: function() {  
                   me.collapse();  
               }  
           }  
       });  
   },  
   onCancelClick: function() {  
       var me = this;      
   me.selectMonth = null;  
       me.collapse();  
   },  
   onOKClick: function() {  
       var me = this;      
   if( me.selectMonth ) {  
              me.setValue(me.selectMonth);  
           me.fireEvent('select', me, me.selectMonth);  
   }  
       me.collapse();  
   },  
   onSelect: function(m, d) {  
       var me = this;      
   me.selectMonth = new Date(( d[0]+1 ) +'/1/'+d[1]);  
   }  
});   
/** Months picker **/  

Java代码  
/********************************************************************************/  
//使用时  
xtype: 'monthfield', //引用类型为上面自定义的部分  
       editable : false,  
       format : 'Y/m',//格式化数据  
       fieldLabel: 'beginDate',  
       value : new Date() //最好加上默认时间 否则在第一次点击的时候 如果没有选择数据就点击OK的话 数据无法展示在对话框中  

ext2版本插件只显示年月-datefield.rar (9.5 KB)
下载次数: 119

Ext4相关文件.rar (1.6 KB)
下载次数: 83

查看图片附件

0 0

ext2，3,和4 版本 只显示年月的日期插件

ext2，3,和4 版本 只显示年月的日期插件

ext2，3,和4 版本只显示年月的日期插件

ext2，3,和4 版本只显示年月的日期插件