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

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

查看图片附件