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

Ext技术交流群：164648099

 

1：ext3版本插件

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

 

插件代码：

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);  

 

调用例子：

  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>

 

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

 效果图：

 

 

 

 

 

3:Ext4版本  年月插件：

 

/** 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 **/

 

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

  其他js见附件

 

评论

7 楼 月度银墙 2017-04-05  

wangxiang243 写道

不错 ！
但是ext4中六月和十二月显示不出来，框子短了，怎么解决？

在

pickerConfig

中加上

height:230,

6 楼 zhaojinmeng 2015-08-11  

您好楼主，extjs5要怎么扩展啊？求指导

5 楼 laungcisin 2014-09-12  

yangxiutian 写道

另外Ext4.2.1还故意把x-monthpicker-buttons的优先级写高了
还必须.x-monthpicker-buttons{position:relative !important;bottom:0;width:100%}
这样写才有效果， 唉 感觉覆盖样式的解决方式并不好啊 Ext一升级 说不定有用不了了

ext-theme-classic-all.css 文件末尾添加
.x-monthpicker-buttons {
    position: relative;
}
.x-datepicker .x-monthpicker-buttons {
    position: absolute;
}

http://www.sencha.com/forum/showthread.php?264688-Ext.picker.Month-bottom-cut-off

4 楼 yangxiutian 2014-04-27  

另外Ext4.2.1还故意把x-monthpicker-buttons的优先级写高了
还必须.x-monthpicker-buttons{position:relative !important;bottom:0;width:100%}
这样写才有效果， 唉 感觉覆盖样式的解决方式并不好啊 Ext一升级 说不定有用不了了

3 楼 yangxiutian 2014-04-27  

楼主，我发现你的解决方案会引发新问题， 如果在同一个页面使用了月份组件和日期组件，那么日期组件点击月份的时候按钮就看不到了，就是因为我们覆盖了它的样式引起的；Ext4.2.1设计的如此蹩脚是不是故意阻止我们扩展月份插件的，那它怎么不搞一个官方的呢。。。

i_m 写道

我在ext4.2中，也是引用该脚本，跟1楼同样问题。我google调试后，找到相关样式。
在jsp中覆盖样式
.x-monthpicker-buttons{position:relative;bottom:0;width:100%}
这个样式，把position:absolute 替换为relative就出来了。

2 楼 i_m 2013-10-31  

我在ext4.2中，也是引用该脚本，跟1楼同样问题。我google调试后，找到相关样式。
在jsp中覆盖样式
.x-monthpicker-buttons{position:relative;bottom:0;width:100%}
这个样式，把position:absolute 替换为relative就出来了。

1 楼 wangxiang243 2013-05-17  

不错 ！
但是ext4中六月和十二月显示不出来，框子短了，怎么解决？